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
<h1>Malý obrázek</h1> <p><img src="http://www.jakpsatweb.cz/images/jakpw.gif"><br> originál <p class=smiesek><img src="http://www.jakpsatweb.cz/images/jakpw.gif"><br> šířka přesně 50 % - nevypadá hezky, zvětšuje se, kostrbaté nebo rozmazané<br> výška přesně 50 % - neuplatní se, není z čeho ji vypočítat <p class=trejpa><img src="http://www.jakpsatweb.cz/images/jakpw.gif"><br> šířka nejvýše 50 % - no vida, zůstal originální, vypadá to hezky<br> výška nejvýše 120 px - neuplatní se, obrázek je nižší <hr> <h1>Široký obrázek</h1> <p><img src="http://diskuse.jakpsatweb.cz/img/logo.png"><br> originál - je třeba ho zúžit <p class=smiesek><img src="http://diskuse.jakpsatweb.cz/img/logo.png"><br> šířka přesně 50 % - takhle jsme to chtěli<br> výška přesně 50 % - neuplatní se, není z čeho ji vypočítat <p class=trejpa><img src="http://diskuse.jakpsatweb.cz/img/logo.png"><br> šířka nejvýše 50 % - použije se, omezí široký obrázek<br> výška nejvýše 120 px - neuplatní se, obrázek je nižší <hr> <h1>Vysoký obrázek</h1> <p><img src="http://qu.wu.cz/webtest/obrazky/vysoky-obrazek.png"><br> originál - je třeba ho snížit <p class=smiesek><img src="http://qu.wu.cz/webtest/obrazky/vysoky-obrazek.png"><br> šířka přesně 50 % - vždyť se nám kvůli zvětšené šířce ještě zvětšila i výška obrázku<br> výška přesně 50 % - neuplatní se, není z čeho ji vypočítat <p class=trejpa><img src="http://qu.wu.cz/webtest/obrazky/vysoky-obrazek.png"><br> šířka nejvýše 50 % - neuplatní se, obrázek je užší<br> výška nejvýše 120 px - výška je omezena přesnou hodnotou <hr>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.smiesek img { width: 50%; height: 50%; } .trejpa img { max-width: 50%; max-height: 120px; } /* další styly jen pro grafické znázornění */ p { width: 400px; border: solid black; text-align: center; padding: 1em 0; } .smiesek { border-color: red; } .trejpa { border-color: gold; } img { background: gray; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>