O co jde? Včera jsem přišel na, alespoň pro mě, doposud neznámou věc. Pokud obrázku dáme výšku nebo šířku v procentech (či jiné relativní jednotce), obrázek ji bude přizpůsobovat oknu, nebo blokovému elementu ve kterém se nachází.
Vše si nejdříve můžeme ukázat na malém říkladě. Jak vidíte obrázek se opravdu přizpůsobuje, platí pro něj tato pravidla:- V IE mění výšku i šířku nezávisle na sobě (v různém poměru) a pokud tedy zadáme v procentech (či jiné relativní jednotce) pouze jednu stranu, obrázek tuto stranu zmenší/zvětší, druhá strana, která je zadána v % se bude nadále přizpůsobovat velikosti okna nebo blokového elementu
- V GECKO prohlížečích se obrázek přizpůsobuje VŽDY v poměru 1:1 a pokud tedy zadáme v procentech (či jiné relativní jednotce) pouze jednu stranu, obrázek zmenší/zvětší šířku/výšku podle hodnoty dané jinou jednotkou než jsou procenta, zase v poměru 1:1
Kompatibilita Testoval jsem v: IE 5.5, IE 6.0 SP2, MOZILLE 1.0, OPERA 7.4 Zkoušel jsem s .jpg a .png typy obrázků.
Tak jak na to…- 1. Přímo v tagu IMG
‹img src=„obrazek.jpg“ alt="" height=„70%“ width=„70%“ /› - 2. Za pomocí stylů img { width: 70%; height 70%}
Závěr – aneb k čemu nám to bude
Toto řešení můžeme využít například pokud chceme 100% Elastický
grafický design, kterému nebude vadit jakékoliv rozlišení. Fantazii se meze
nekladou :)
Popularity: 2% [?]
