Box model

Rozměry a overflow

Jak velký má element být, a co se stane, když se do něj obsah nevejde.

Postavíme kartu s fotkou a nástěnku s oznámením. V náhledu vidíte, kam se dostaneme.

Vlastnost · 1

Pevná šířka width

Karta má přesně 560 px. Na desktopu vypadá dobře. Fotka uvnitř má width: 100%, takže je vždy široká jako karta.

Přepněte náhled na mobil: karta je širší než telefon a vyčuhuje ven. Pevná šířka se nepřizpůsobí.

Vlastnost · 2

Nejvýš max-width

Místo pevné šířky jen strop. Karta bude mít nejvýš 560 px, ale když je místa méně, zúží se.

Na mobilu teď karta vyplní šířku a nikde nevyčuhuje. max-width místo width je jedno z nejužitečnějších pravidel vůbec.

Vlastnost · 3

Poměr stran aspect-ratio

Fotka má svůj vlastní poměr stran a je moc vysoká. Chceme širokoúhlý formát 16 : 9, ať je karta jakkoli široká. Výška se dopočítá sama.

object-fit: cover obrázek ořízne, aby se nedeformoval. Bez něj by se hory zmáčkly.

Past

Pevná výška height

Nástěnce dáme pevnou výšku 80 px. Jenže text je delší a vyteče ven přes pozadí.

Nikdy nevíte, kolik textu bude, ani jak široká bude obrazovka. Pevnou výšku u textu raději nepoužívejte.

Vlastnost · 4

overflow

Když výška pevná být musí, rozhodněte, co s textem navíc. auto přidá scrollbar, jen když je potřeba.

Další hodnoty: visible (výchozí, přeteče ven), hidden (ořízne a zahodí) a scroll (scrollbar vždy).

Vlastnost · 5

Nejméně min-height

Většinou ale chceme něco jiného: nástěnka má být vysoká aspoň 80 px, a když je textu víc, ať naroste. Scrollbar zmizí.

Stejná logika jako u šířky: min-height a max-width dávají meze, ale nechávají obsahu volnost.

Responzivita

Na telefonu vyšší fotka

Díky max-width se karta zúžila sama. Širokoúhlá fotka je ale na úzkém displeji jen tenký proužek. Na mobilu jí dáme poměr 4 : 3.

Nástěnka s min-height na mobilu prostě naroste, text se do ní vejde vždycky.

Shrnutí

Meze místo pevných čísel

Ano

• max-width pro bloky a karty
• width: 100% pro obrázky uvnitř
• aspect-ratio pro fotky a videa
• min-height pro bloky s textem
• overflow: auto, když výška pevná být musí

Ne

• pevná width větší než telefon
• pevná height u textu

← Zpět do rejstříku