Vlastnost aspect-ratio v CSS: Držíme poměr stran snadno a elegantně

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.

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í:

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.