Pracuji s obrázky a narazil jsem na problém s poměrem stran.
<img src="big_image.jpg" width="900" height="600" alt="" />
Jak vidíte, výška
a šířka
jsou již zadány. Přidala jsem pravidlo CSS pro obrázky:
img {
max-width:500px;
}
Ale pro big_image.jpg
dostanu width=500
a height=600
. Jak mohu nastavit změnu velikosti obrázků při zachování jejich poměrů stran.
Vlastnost background-size je ie>=9, ale pokud vám to vyhovuje, můžete použít div s background-image
a nastavit background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Nyní můžete nastavit velikost divu na libovolnou hodnotu a obrázek si nejen zachová svůj poměr stran, ale také bude v divu vertikálně i horizontálně vycentrován. Jen nezapomeňte nastavit rozměry v css, protože divy nemají atribut width/height v samotném tagu.
Tento přístup se liší od setecsovy odpovědi, při jeho použití bude plocha obrázku konstantní a vámi definovaná (s ponecháním prázdných míst buď horizontálně, nebo vertikálně v závislosti na velikosti divu a poměru stran obrázku), zatímco setecsova odpověď vám poskytne box, který bude přesně odpovídat velikosti škálovaného obrázku (bez prázdných míst).
Edit: Podle MDN background-size documentation můžete v IE8 simulovat vlastnost background-size pomocí vlastní deklarace filtru:
Přestože Internet Explorer 8 nepodporuje vlastnost background-size, je možné emulovat některé její funkce pomocí nestandardní funkce -ms-filter:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Odstranění vlastnosti "height".
<img src="big_image.jpg" width="900" alt=""/>
Uvedením obou vlastností měníte poměr stran obrázku. Pouhým nastavením jedné z nich se změní velikost, ale poměr stran zůstane zachován.
Volitelně lze omezit zvětšení:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Neexistuje žádný standardní způsob, jak zachovat poměr stran u obrázků se zadanými hodnotami šířka
, výška
a max-šířka
.
Jsme tedy nuceni buď zadat šířku
a výšku
, abychom zabránili "skokům" stránky při načítání obrázků, nebo použít max-šířku
a rozměry obrázků nezadávat.
Zadání pouze šířky
(bez výšky
) obvykle nemá velký smysl, ale můžete zkusit přepsat atribut výška
HTML přidáním pravidla jako IMG {height: auto; }
do svého souboru stylů.
Viz také související Firefox bug 392261.