Obrázky reagující na velikost viewportu
Tvorba obrázků, které reagují na velikost nadřazeného bloku. Dbejte na to aby obrázky byly vkládany v dostatečném rozlišení, aby přiměřeným zvětšením nedocházelo ke ztrátě kvality.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Simon Willison. Bližší popis najdete v článku Sizing Images With Percentages.
CSS
body
{
border:0;
margin:0 ;
padding:0
}
div#outside
{
float:left;
width: 49%;
background:#f6f6f6;
}
div#outside1
{
float:right;
width: 49%;
background:#f6f6f6;
}
div#inside
{
width: 100%;
text-align:center;
}
div#inside img
{
width: 80%;
margin:auto;
}
div#inside1
{
width: 100%;
text-align:center;
}
div#inside1 img
{
width: 80%;
margin:auto;
}
XHTML
<html>
<body>
<div id=“outside“>
<div id=“inside“>
<img src=“slunecnice.jpg“ alt=“slunečnice“ />
</div>
</div>
<div id=“outside1″>
<div id=“inside1″>
<img src=“slunecnice.jpg“ alt=“slunečnice“ />
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
inPage AI: Jak na generování obsahu
18. července 2024 -
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
4 tipy, jak na efektivní úsporu při rozjezdu podnikání
3. ledna 2023 -
Monitory OLED: klíčové pojmy a funkce
13. května 2024
Nejnovější
-
Jak zvýšit CTR vašeho e-mail marketingu
9. září 2024 -
Znovuuvedení domény .AD
5. září 2024 -
Jak vybrat doménu: Co je dobré vědět?
2. září 2024 -
Proč je důležité tvořit obsah na váš web?
29. srpna 2024