Responzivní webový design – obrázky
Změňte velikost okna prohlížeče, abyste viděli, jak se obrázek přizpůsobí stránce.
Použití vlastnosti šířka
Pokud je width
vlastnost nastavena na procenta a height
vlastnost je nastavena na „auto“, bude obrázek reagovat a bude se zvětšovat a zmenšovat:
Příklad
img {
width: 100%;
height: auto;
}
Všimněte si, že ve výše uvedeném příkladu lze obrázek zvětšit tak, aby byl větší, než je jeho původní velikost. Lepším řešením v mnoha případech bude
max-width
místo toho použít nemovitost.
Použití vlastnosti max-width
Pokud je max-width
vlastnost nastavena na 100 %, obrázek se v případě potřeby zmenší, ale nikdy se nezvětší, aby byl větší než jeho původní velikost:
Příklad
img {
max-width: 100%;
height: auto;
}
Přidejte obrázek na ukázkovou webovou stránku
Příklad
img {
width: 100%;
height: auto;
}
Obrázky na pozadí
Obrázky na pozadí mohou také reagovat na změnu velikosti a měřítka.
Zde si ukážeme tři různé metody:
1. Pokud je background-size
vlastnost nastavena na "contain", obrázek na pozadí se změní a pokusí se přizpůsobit oblasti obsahu. Obrázek si však zachová svůj poměr stran (proporcionální vztah mezi šířkou a výškou obrázku):
Zde je kód CSS:
Příklad
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. Pokud je background-size
vlastnost nastavena na „100 % 100 %“, obrázek na pozadí se roztáhne tak, aby pokryl celou oblast obsahu:
Zde je kód CSS:
Příklad
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Pokud je background-size
vlastnost nastavena na "cover", obrázek na pozadí se změní tak, aby pokryl celou oblast obsahu. Všimněte si, že hodnota „cover“ zachovává poměr stran a některá část obrázku na pozadí může být oříznuta:
Zde je kód CSS:
Příklad
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Různé obrázky pro různá zařízení
Velký obraz může být perfektní na velké obrazovce počítače, ale k ničemu na malém zařízení. Proč načítat velký obrázek, když jej stejně musíte zmenšit? Chcete-li snížit zatížení nebo z jiných důvodů, můžete pomocí dotazů na média zobrazit různé obrázky na různých zařízeních.
Zde je jeden velký obrázek a jeden menší obrázek, který se zobrazí na různých zařízeních:
Příklad
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
min-device-width
Místo šířky prohlížeče
můžete použít dotaz na média min-width
, který kontroluje šířku zařízení. Potom se obrázek při změně velikosti okna prohlížeče nezmění:
Příklad
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Element <picture> HTML
Element HTML <picture>
poskytuje webovým vývojářům větší flexibilitu při specifikování zdrojů obrázků.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture>
element works similar to the <video>
and
<audio>
elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset
attribute is required, and defines the source of the image.
The media
attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img>
element for browsers that do not support the
<picture>
element.