Работя с изображения и се сблъсках с проблем, свързан със съотношенията на страните.
<img src="big_image.jpg" width="900" height="600" alt="" />
Както можете да видите, height
и width
вече са зададени. Добавих CSS правило за изображенията:
img {
max-width:500px;
}
Но за big_image.jpg
получавам width=500
и height=600
. Как мога да настроя изображенията да се преоразмеряват, като се запазват съотношенията на страните им.
Свойството background-size е само за 9, но ако това ви устройва, можете да използвате div с background-image
и да зададете background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Сега можете просто да зададете размера на вашия div, какъвто искате, и изображението не само ще запази съотношението на страните си, но и ще бъде центрирано както вертикално, така и хоризонтално в рамките на div. Само не забравяйте да зададете размерите в css, тъй като div нямат атрибут width/height в самия таг.
Този подход се различава от отговора на setecs, тъй като при него площта на изображението ще бъде постоянна и определена от вас (оставяйки празни пространства по хоризонтала или вертикала в зависимост от размера на div и съотношението на изображението), докато при отговора на setecs ще получите кутия, която е точно с размера на мащабираното изображение (без празни пространства).
Редактиране: Според документацията MDN background-size можете да симулирате свойството background-size в IE8, като използвате собствена декларация за филтър:
Въпреки че Internet Explorer 8 не поддържа свойството background-size, възможно е да се емулира част от неговата функционалност, като се използва нестандартната функция -ms-filter:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Премахване на свойството "height".
<img src="big_image.jpg" width="900" alt=""/>
Като посочвате и двете, променяте съотношението на страните на изображението. Ако зададете само едното, ще промените размера, но ще запазите съотношението на страните.
По избор, за да ограничите преоразмеряването:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Не съществува стандартен начин за запазване на съотношението на страните на изображенията, за които заедно са зададени стойности широчина
, височина
и максимална ширина
.
Така че сме принудени или да посочим широчина
и височина
, за да предотвратим "прескачането" на страницата при зареждане на изображенията, или да използваме максимална ширина
и да не посочваме размери за изображенията.
Посочването само на широчина
(без височина
) обикновено няма особен смисъл, но можете да се опитате да замените HTML-атрибута височина
, като добавите правило като IMG {height: auto; }
във вашия лист със стилове.
Вижте също свързания с това Firefox bug 392261.