Poměr stran

Pevná výška funguje, ale nebere ohled na šířku: v široké kartě je z obrázku vysokého 192 pixelů nízký pruh, v úzké skoro čtverec. Naše karta sice nikdy není širší než 24rem (max-w-sm), ale obrázky jinde na webu, třeba přes celou šířku stránky, mohou být úzké i velmi široké. Často je proto lepší dát obrázku tvar: poměr stran, tedy poměr jeho šířky k výšce. To umí vlastnost CSS aspect-ratio (poměr stran) a prohlížeč pak výšku dopočítá ze šířky:

aspect-ratio: 16 / 9; /* 16 dílů na šířku, 9 na výšku */

Třída	CSS	Tvar
`aspect-square`	`aspect-ratio: 1 / 1;`	čtverec
`aspect-video`	`aspect-ratio: 16 / 9;`	video nebo obrazovka televize
`aspect-4/3`	`aspect-ratio: 4 / 3;`	jakýkoli poměr zapsaný jako zlomek
`aspect-auto`	`aspect-ratio: auto;`	vlastní poměr stran prvku

Aby poměr stran fungoval, nesmí mít prvek nastavenou šířku i výšku zároveň: jedna z nich je daná (tady šířka, w-full) a druhou dopočítá poměr. Když na obrázku necháte h-48, poměr stran se nepoužije.

Spolu s object-cover můžete dát jakékoli fotce tvar, jaký chcete, a nezdeformuje se. Proto na obrázcích často uvidíte trojici tříd w-full aspect-video object-cover.

Pokyny

U Oskarova obrázku nahraďte třídu h-48 třídou aspect-video. Obrázek bude mít vždycky tvar videa, 16 : 9. (Vyzkoušejte i aspect-square a pak se vraťte k aspect-video.)

Začněte programovat zdarma

6/10