Od Chrome verze 88 a brzy i v dalších prohlížečích můžeme používat vlastnost aspect-ratio
, která umožňuje vytvářet kontejnery pro asynchronní obsah a zabránit tak nechtěnému překreslování obsahu stránky, který měří Kumulativní posun layoutu (CLS).
Technik pro zajištění poměru stran v CSS máme vcelku hodně, přičemž zajištění plochy pro obrázky už příliš řešit nemusíme, to za nás rozlouskly prohlížeče a my jen musíme dodat atributy width
a height
.
Pokud jde o další typy obsahu – iframe
s obsahem třetí strany, videa, vkládané SVG dokumenty, asychronně vykreslený obsah od grafů až po výsledky ajaxových dotazů – asi nejznámější metodou je padding trik.
aspect-ratio
je tady, aby nahradilo právě trik s paddingem. Je to úplně jednoduché, jako hodnotu vlastnosti stačí uvést poměr stran:
.box {
aspect-ratio: 4/3;
}
Připravil jsem demo s obrázkem, ve kterém to snad půjde dobře vidět:
V HTML je .box
rodičem obrázku:
<p class="box">
<img src="http://satyr.io/4000x3000/green?delay=3000&text=IMG"
width="2000" height="1500" alt="Image">
</p>
Povšimněte si atributů width
a height
, které drží poměr stran samotného obrázku.
Díky vlastnosti delay
má obrázek servírovaný skvělou službou Satyr.io nastaveno zpoždění. Když na něj čekáme, prohlížeč by vykreslil bílou plochu. My ale chceme barevný placeholder, aby bylo vidět, že na toto místo něco dorazí. K tomu nám poslouží .box
, který má nastavený poměr stran stejně jako obrázek – 4:3 – aspect-ratio: 4/3
.
Toto bylo úplně základní použití. V textu na web.dev, který sepsala Una Kravets jsou vidět další možnosti – například zajištění stejné velikosti prvků uvnitř CSS gridu.
Podpůrná vlastnost object-fit
Pokud by byl aspect-ration
člověk, do hospody by pravidelně chodil s vlastnostmiobject-fit
a object-position
. Je to nerozlučná trojka.

Obrázek: Hodnoty vlastnosti object-fit.
Pro elementy typu obrázky nebo videa, u kterých nevíme, jaký budou mít poměr stran, totiž můžeme držet jednotný prostor a vnitřní prvky následně ořezat nebo nějak napozicovat. Možnosti vlastnosti object-fit
jsou následující:
Hodnota | Jak se chová? |
---|---|
fill (výchozí) |
Vyplní celou plochu. Klidně zdeformuje poměr stran obsahu, ale neořízne ho. |
contain |
Nevyplní vždy celou plochu. Obsah nezdeformuje, neořízne a zobrazí celý. |
scale-down |
Stejně jako contain , ale nikdy nezvětší obrázek nad přirozenou velikost. |
cover |
Vyplní celou plochu. Nenechá volné místo, nezdeformuje obsah, ořízne ho. |
none |
Drží původní velikost a poměr stran. Někdy ořízne, někdy nechá volné místo. |
Triky s attr() a důležitost atributů width a height
Měl bych zmínit, že prohlížeče přidaly aspect-ratio
do svých výchozích stylů pro překvapivě hodně prvků a to nejen těch, do kterých se stahuje asynchronní obsah.
Toto je například z výchozího stylopisu Firefoxu, alespoň podle MDN:
img, input[type="image"], video, embed, iframe, marquee, object, table {
aspect-ratio: attr(width) / attr(height);
}
Nastavení poměru stran do atributů width
a height
tedy definitivně berme za zásadní.
Podpora
Vlastnost aspect-ratio
podporuje Chrome od verze 88. Na ostatní prohlížeče se v době psaní textu čeká, ale dočkáme se velmi brzy, v řádu měsíců. Firefox plánuje podporu od verze 87 (nyní mám 85). Safari od Technology Preview verze 119, takže se objeví v některém z příštích Safari. Více je na CanIUse.
Komentáře
Váš názor? Vaše zkušenosti? Našli jste chybu?