Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<title>Zabránění poskakování obrázků s proměnlivou šířkou</title> <h1>Zabránění poskakování obrázků s proměnlivou šířkou</h1> <p>Obrázek 200 × 150 pixelů se díky <code>max-width</code> neroztáhne nad své skutečné rozměry:</p> <div class="img" style="max-width: 200px"> <div class="img-cover" style="padding-bottom: 75%"> <img src="i/200x150" width="200" height="150"> </div> </div> <p>Velký obrázek se přizpůsobí maximální dostupné velikosti okna.</p> <div class="img" style="max-width: 2000px"> <div class="img-cover" style="padding-bottom: 75%"> <img src="i/2000x1500" width="2000" height="1050"> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.img-cover { height: 0; } .img-cover img { width: 100%; height: auto; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>