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>Nastavení responsivních placeholderů pro obrázky</title> <h1>Nastavení responsivních placeholderů pro obrázky</h1> <img src="/i/200x150" width="200" height="150"> <p>Obsah, který neposkočí po dotažení obrázku.</p> <img src="/i/2000x1500" width="2000" height="1500">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* jen zvýraznění zabrané plochy */ .img-cover { background: #000; }
CSS
Autoformát
CSS reset
Až na konci
var obrazky = document.images; for (var i = obrazky.length; i--; ) { var img = document.createElement("div"); img.className = "img"; var imgCover = document.createElement("div"); imgCover.className = "img-cover"; img.appendChild(imgCover); obrazky[i].parentNode.insertBefore(img, obrazky[i]); imgCover.appendChild(obrazky[i]); var ratio = (parseInt(obrazky[i].height) / parseInt(obrazky[i].width)) * 100; img.style.cssText = "max-width: " + parseInt(obrazky[i].width) + "px"; imgCover.style.cssText = "height: 0; padding-bottom: " + ratio + "%; position: relative"; obrazky[i].style.cssText = "width: 100%; height: 100%; position: absolute; top: 0"; }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>