Взимане width в пиксел от width в проценти

X

XpM_Master

Registered
Здравейте,

Понеже се опитвам да направя сайта добре изглеждащ при различни резолюции, често за размерите използвам % примерно width=80%

Обаче понякога ми трябва да разбера какви са тези размери в пиксели. Има ли начин и как ще стане?
 
ами примерно ако имаш див и в него се намира една лента която е дълга 80% и дивът е дълъг 600 пиксела просто смяташ колко са 80% от 600 пиксела.
 
Е това е ясно. Ама ако нямам Див с определена дължина, а тя се определя от резолюцията на разглеждащия, т.е. на всеки потребител който гледа сайта ще е различно?

П.С. Искам да направя ресайз на изображения, като малките не ги пипа, а само тези които излизат над определен размер, зависещ от резолюцията. И за да определя този размер колко е ми трябва това превръщане.
 
все още не схванах какво точно имаш предвид.Но сайтовете се правят за точно определена резолюция и в някой случаи за определени браузъри. Направи го за 1024х768 това е стандартната и най-ползваната
 
Ами идеята ми за сайта е панелите от двете страни да са с определена ширина, но на централната част със съдържанието да може да варира. Така сайта ще е винаги толкова широк колкото екрана на разглеждащия и няма да има гаден скрулбар отдолу или празни полета от страни. Когато в средата е текст - няма проблем - не е от голямо значение на колко реда ще излезе, но когато имам изображение е нужен ресайз според резолюцията за да пасне добре.

:)


П.С. Ако няма начин да стане ще се откажа от идеята, но ми се иска да се получи така.
 
еми щом искаш да го правиш по тъпия начин добре.
Не можеш л ида зададеш на изображението също да е в проценти ...
 
Амиии
<img src="блабла" width=80%>
тогава става като процент от размера на изображението, а не от цялата страница. Следователно този размер пак трябва да варира според резолюцията....
 
Ако съм те разбрал правилно искаш нещо такова ?
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<script>
	function davai()
	{
		var edno = parseInt(document.getElementById("tra").style.width);
		var dve = parseInt(document.getElementById("tra").parentNode.style.width);
		alert(edno*dve/100);
	}
	</script>
	<title>Untitled 2</title>
</head>

<body>
<div style="width:1200px">
<div id='tra' style='border:1px solid red;width:50%;'></div>

<input type="button" onclick="davai()"/>
</div>
</body>
</html>
 
Не точно. Ако външния див ми е зададен в % връща ширината на вътрешния пак в %. А мен ми трябва от проценти в пиксели.
 
Ползвай тази функция:
Код: 
function getStyle(elem, attribute){		
		return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attribute);
}
Връща ти обработения от браузъра стил.
Използва се така:
Код: 
var width = getStyle(document.getElementById('content'), 'width');
:)
 
Повечето елеметни имат стандартните свойства "offsetWidth" и "offsetHeight", които се подържат във всички модерни браузъри :

width = document.getElementById('someId').offsetWidth
height = document.getElementById('someId').offsetHeight

Така взимаш широчина и височина в пиксели. Няма ли това да ти свърши работа? computedStyle не работи във всички браузъри.
 
Благодаря на всички които ми помогнаха до сега. Помъчих се доста, но слабите ми познания по JS си казаха думата.

Значи направо би било по-добре да се определи една дължина да речем 650 пиксела за максимална и ако изображението е по-голямо да прави ресайз.

Ето какво не успях да направя - в тази функция за BBcode ако изображението е по-широко от 650пиксела да добавя не
а да речем [bigimg][/bigimg].

После когато минавам текста с preg_replace вече е лесно тези които са с [bigimg] да им задам широчината, а на малките не и така няма да ги разтягам.

Код: 
function doImage(obj)
{
textarea = document.getElementById(obj);
var url = prompt('Enter the Image URL:','http://');
var scrollTop = textarea.scrollTop;
var scrollLeft = textarea.scrollLeft;

if (url != '' && url != null) {

	if (document.selection)
			{
				textarea.focus();
				var sel = document.selection.createRange();
				sel.text = '[img]' + url + '[/img]';
			}
   else
    {
		var len = textarea.value.length;
	    var start = textarea.selectionStart;
		var end = textarea.selectionEnd;

        var sel = textarea.value.substring(start, end);
	    //alert(sel);
		var rep = '[img]' + url + '[/img]';
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);


		textarea.scrollTop = scrollTop;
		textarea.scrollLeft = scrollLeft;
	}
}

}


Благодаря предварително.



П.С. Тя темата се оказа за друг раздел. Ако Модераторите преценят може да я преместят.
 
Ако изображението не е заредено в браузъра няма как да му вземеш широчината. Или то си е на страницата?
 
:?

Не е заредено. Праща му се Урл-то във prompt-а

Мислех че в Js има функция подобна на getimagesize
 
Не, няма. Може да им взимаш / сетваш размери само след като си ги показал на страницата. Например може след като се зареди страницата може да намираш големите и да им сетваш широчина 650px. Но не знам до колко е добро като идея :)
 
А как това ще се направи само в един определен Див?
 
Ако имаш нещо такова като кода:

Код: 
<div id="imgcontainer">
  <img src="xxxx" />
</div>


ще ти свърши работа следната функция :

Код: 
function fixMyImage(){
 
 maxW = 650; // max allowed width 
 maxH = 400;   // max allowed height 
 
 // all images in div  
 myImg = document.getElementById('imgcontainer').getElementsByTagName('IMG');
 
 // get first image 
 myImg = myImg[0]; 
 
 // resize
 if(myImg.offsetWidth > maxW ) {
    myImg.style.width = maxW + 'px';
 } else if(myImg.offsetHeight > maxH ){
    myImg.style.height = maxH + 'px';
 } 

}

Ако сложиш id на картинката, а не на дива можеш да си я вземеш направо нея с getElementById и да си опростиш функцията

Трябва да се извика след като се е заредила страницата, например с <body onload="fixMyImage()"> или може и с javascript
 
Перфектно - функцията ми свърши отлична работа. Благодаря много :?:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе