Obrázky

Teď se podíváme na Oskarův obrázek. Zatím nemá žádnou třídu, a přesto se do karty pěkně vejde. Postaral se o to opět Preflight. Všem obrázkům dává tyto styly:

img {
	display: block;
	max-width: 100%;
	height: auto;
}

display: block: obrázek je blokový prvek na vlastním řádku. Bez toho by ho prohlížeč zobrazil jako řádkový prvek, podobně jako slovo ve větě, a pod obrázkem by zůstala malá mezera.
max-width: 100%: obrázek nikdy není širší než jeho rodič. Náš obrázek je široký 600 pixelů, ale zmenší se na šířku karty.
height: auto: výška se řídí šířkou, takže si obrázek zachová svůj poměr stran (tvar, tedy kolikrát je širší než vyšší) a nezdeformuje se.

Karty na webu ale obvykle mívají obrázky stejně vysoké, ať mají fotky jakýkoli tvar. Když obrázku nastavíte šířku i výšku, dostane jeho box jiný tvar, než má obrázek sám, a jak ho obrázek vyplní, určuje vlastnost CSS object-fit (přizpůsobení objektu):

Třída	CSS	Co dělá
`object-fill`	`object-fit: fill;`	Roztáhne nebo stlačí obrázek přesně na velikost boxu. To je výchozí hodnota.
`object-cover`	`object-fit: cover;`	Vyplní celý box a zachová poměr stran. Co přečnívá, se ořízne, jako u fotky nastavené jako tapeta na telefonu.
`object-contain`	`object-fit: contain;`	Celý obrázek se vejde do boxu a zachová si poměr stran, zbytek boxu zůstane prázdný.

Tady je Oskarův obrázek v boxu, který je dvakrát širší než vyšší (čárkovaná čára):

object-fill

object-cover

object-contain

Většinou chcete object-cover: box je vyplněný a kocour nevypadá zdeformovaně. Vyzkoušíme si to postupně.

Pokyny

Přidejte Oskarovu obrázku třídu h-48 (height: 12rem, 192 pixelů). Obrázek zatím nemá atribut class, takže do tagu img napište class="h-48". Obrázek se sníží, ale také zúží: prohlížeč zachovává jeho poměr stran, takže s menší výškou přijde i menší šířka.

Přidejte třídu w-full (width: 100%). Obrázek zase vyplní šířku karty, ale teď je zploštělý: když má nastavenou šířku i výšku, výchozí object-fill ho roztáhne na velikost boxu.

Přidejte třídu object-cover. Obrázek má zase svůj poměr stran a vyplní celý box: prohlížeč z něj nahoře a dole ořízne pruh.

Začněte programovat zdarma

5/10