MA747: pro obrázek na maximální šířku používám toto:
<div class="fullwidth"><img alt="alt. text" src="../Images/img.gif" /></div>
a css styl:
div.fullwidth {
margin-top:1em;
margin-right:0em;
margin-bottom:1em;
margin-left:0em;
}
div.fullwidth img {
width:100%;
height: auto;
}alternativně je možno uvést do tagu
img velikost obrázku v pixelech.
<div class="fullwidth"><img alt="alt. text" src="../Images/img.gif" height="1304" width="864" /></div>
Prý je to dobrá praxe, protože urychluje rendering stránky a kompatibilní se strými staré kindly (mobi7). Nemám bohužel žádný pro vyzkoušení, takže nedokážu ověřit.
Uvedené je otestováno na Kindlu Paperwhite, Kindlu pro Android s hd displejem 1600x2560, iBooks, Google Play.
Pokud chceš kompatibilitu i se starými Kindly (mobi7), pak je asi vhodnější nahradit
div tagem
p. Pak bychom měli:
<p class="fullwidth"><img alt="alt. text" src="../Images/img.png" height="1304" width="864" /></p>
a css
p.fullwidth {
margin:1em 0 1em 0;
text-indent: 0em !important;
text-align: center !important;
}
p.fullwidth img {
width:100%;
height: auto;
}
!important je důležité, pokud by jsi použil více tříd současně, v našem případě málo pravděpodobné.
Oba způsoby fungují, možná, když nad tím přemýšlím, tak
p verze je asi spolehlivější, protože jednoznačně definuje indent.