Pracujem s obrázkami a narazil som na problém s pomerom strán.
<img src="big_image.jpg" width="900" height="600" alt="" />
Ako vidíte, výška
a šírka
sú už zadané. Pridal som pravidlo CSS pre obrázky:
img {
max-width:500px;
}
Ale pre big_image.jpg
dostanem width=500
a height=600
. Ako môžem nastaviť zmenu veľkosti obrázkov pri zachovaní ich pomerov strán.
Vlastnosť background-size je ie>=9, ale ak vám to vyhovuje, môžete použiť div s background-image
a nastaviť background-size: contain
:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Teraz môžete jednoducho nastaviť veľkosť divu na akúkoľvek veľkosť a nielenže si obrázok zachová svoj pomer strán, ale bude aj vertikálne a horizontálne vycentrovaný v rámci divu. Len nezabudnite nastaviť rozmery v css, pretože divy nemajú atribút width/height na samotnej značke.
Tento prístup sa líši od setecsovej odpovede, pomocou nej bude plocha obrázka konštantná a definovaná vami (ponechajúc prázdne miesta buď horizontálne alebo vertikálne v závislosti od veľkosti div a pomeru strán obrázka), zatiaľ čo setecsova odpoveď vám poskytne box, ktorý má presne veľkosť zmenšeného obrázka (bez prázdnych miest).
Upraviť: Podľa dokumentácie MDN background-size môžete v IE8 simulovať vlastnosť background-size pomocou vlastnej deklarácie filtra:
Hoci Internet Explorer 8 nepodporuje vlastnosť background-size, je možné emulovať niektoré jej funkcie pomocou neštandardnej funkcie -ms-filter:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Odstráňte vlastnosť "height".
<img src="big_image.jpg" width="900" alt=""/>
Zadaním oboch vlastností zmeníte pomer strán obrázka. Nastavením len jedného sa zmení veľkosť, ale pomer strán sa zachová.
Voliteľne môžete obmedziť zväčšovanie:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Neexistuje žiadny štandardný spôsob, ako zachovať pomer strán pre obrázky so spoločne zadanými hodnotami šírka
, výška
a max-šírka
.
Takže sme nútení buď špecifikovať šírku
a výšku
, aby sme zabránili "skokom" stránky počas načítavania obrázkov, alebo použiť max-šírku
a nezadávať rozmery obrázkov.
Zadávanie len šírky
(bez výšky
) zvyčajne nemá veľký zmysel, ale môžete sa pokúsiť prepísať atribút HTML výška
pridaním pravidla ako IMG {výška: auto; }
do svojho súboru štýlov.
Pozrite si tiež súvisiacu chybu prehliadača Firefox bug 392261.