Pomer strán - Triky CSS

Vlastnosť CSS aspect-ratioumožňuje vytvoriť krabice, ktoré udržujú proporcionálne rozmery, kde heighta widthkrabice sú automaticky vypočíta ako pomer. Je to trochu matematika, ale predpokladá sa, že na tejto vlastnosti môžete vydeliť jednu hodnotu druhou a vypočítaná hodnota zabezpečí, že rámček zostane v takom pomere.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratioje definovaná v špecifikácii úrovne CSS Box Sizing Module úrovne 4, ktorá je momentálne v pracovnom koncepte. To znamená, že stále pokračuje a má šancu sa zmeniť. Ale keďže Chrome a Firefox ho podporujú za experimentálnou vlajkou a Safari Technology Preview ho pridáva začiatkom roku 2021, existujú silné signály, ktoré aspect-rationaberajú na obrátkach.

Syntax

aspect-ratio: auto || ;

V jednoduchej angličtine: aspect-ratiobuď sa predpokladá, že je autopredvolene, alebo akceptuje hodnotu a ako hodnotu kde .

• Pôvodná hodnota: auto
• Vzťahuje sa na: všetky prvky okrem vložených políčok a vnútorných rubínových alebo tabuľkových škatúľ
• Zdedené: č
• Percentá: n / a
• Vypočítaná hodnota: zadané kľúčové slovo alebo dvojica čísel
• Typ animácie: diskrétna

Hodnoty

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Funguje na nahradenom a nenahradenom obsahu

Ak si myslíte: „Hm, jo, nerobí to pre nás prehliadač už na obrázkoch?“ odpoveď je: absolútne . Prehliadače robia niektoré fantastické výpočty pomeru strán na nahradenom obsahu, ako sú obrázky. Ak má teda obrázok povedzme šírku 500 pixelov, prehľadávač prispôsobí svoje algoritmy rozloženia CSS tak, aby zachoval jeho prirodzené alebo „prirodzené“ rozmery. aspect-ratioVlastnosť môže byť použitá k efektívnemu potlačeniu týchto prírodných rozmerov.

Nenahradený obsah ale nemá prirodzený podiel. To je väčšina vecí, s ktorými pracujeme, napríklad divy. Namiesto pokusu o zachovanie prirodzených proporcií prvku aspect-rationastaví „preferovanú“ veľkosť.

Teraz špecifikácia poznamenáva, že staršie špecifikácie CSS, najmä CSS 2.1, neobsahujú jasný rozdiel medzi nahradeným a nenahradeným obsahom. To znamená, že sme mohli vidieť niektoré ďalšie špeciálne prípady pridané k špecifikácii, aby sme ich objasnili. V súčasnej dobe vidíme prehľadávače zavádzajúce podporu pre nastavenie preferovaných pomerov strán na nahradené a nenahradené osobitne, kde niektoré z prehľadávačov s počiatočnou podporou experimentálneho príznaku môžu podporovať iba aspect-rationenahradený obsah. Určite stojí za to sledovať vývoj prehliadača.

Funguje to samo o sebe bez udania widthaleboheight

Takže, môžeme to jednoducho položiť na prvok ako je tento:

.element ( aspect-ratio: 16 / 9; )

... a predvolené nastavenie prvku sa width: autoimplicitne naštartuje, aby sa nastavili rozmery prvku.

Mení sa, keď sú widthalebo heightsú na rovnakom prvku

Povedzme, že máme prvok s šírkou 300pxa aspect-ratioz 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Prirodzene, aspect-ratiochce vypočítať rozmery prvku samostatne a urobí to na základe kontextu, v ktorom sa použije. Ale keď je to widthzahodené, hovorí to pomeru strán, aby vypočítal pole pomeru strán prvku pomocou 300pxšírky. Výsledkom je, že sme práve napísali:

.element ( height: 100px; width: 300px; )

Toto dáva zmysel! Pamätajte, že keď nie sú zadané widthalebo heightsú zadané, prehľadávač predpokladá, že sú, autoa ide odtiaľ. Keď poskytneme explicitné hodnoty widtha heighthodnoty, tak si zvykneme.

V niektorých situáciách sa ignoruje

To je miesto, kde to bude trochu myslieť, pretože existujú prípady, keď aspect-ratioje prehliadaný alebo jeho výpočty ovplyvňujú iné vlastnosti. Zahŕňa to:

Keď sú aj widtha heightsú deklarované na prvku

Len sme videli, ako deklarácia buď widthalebo heightna a element ovplyvní výpočet aspect-ratio. Ale ak prvok už má aj widtha height, tak sa zvyknú namiesto aspect-ratio. Vyžaduje prepísanie oboch vlastností aspect-ratio; nastavenie buď samotné, heightalebo widthnezruší pomer strán prvku.

Robí sny, že? Ak použijete jednu widthalebo heightvynútite aspect-ratiopoužitie tejto hodnoty vo výpočte, logicky z toho vyplýva, že použitie oboch by úplne prepísalo aspect-ratioúplne, pretože obe hodnoty sú už poskytnuté a nastavené.

Keď obsah vypadne z pomeru

Zjednodušene povedané, ak máte prvok s pomerom strán a jeho obsah je taký dlhý, že núti element sa rozširovať, potom sa element rozšíri. A ak sa prvok roztiahne, jeho rozmery sa zmenia, a teda už žiadny pomer strán. Preto špecifikácia hovorí, že vlastnosť nastavuje „preferovaný“ pomer strán. Je to preferované, ale nie predpísané.

Nepáči sa vám, ako to funguje? Nastavenie min-height: 0;prvku umožní, aby obsah namiesto rozšírenia prekročil preferovaný pomer strán.

Keď to „stratí“ min-*a max-*vlastnosti

Len sme trochu videli, ako to funguje, že? Keď obsah presahuje rozmery krabice, položka aspect-ratioje skutočne preč, pretože sa pole rozširuje o obsah. Môžeme to prepísať min-width: 0.

To preto, že všetky min-*a max-*vlastnosti typicky bitka widtha heighto nadvládu vo vojne nad výpočty box model. Napríklad:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Ale:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Je to preto, lebo min-widthbuď bráni widthv poklese pod konkrétnu hodnotu, alebo je ignorovaná, pretože widthsada už nastavila prvok nad minimálnu šírku, ktorá musí byť. To isté platí pre min-height, max-widtha max-height.

Pointa tohto všetkého: ak nastavíme obidve vlastnosti min-*alebo max-*na rovnaký prvok ako aspect-ratioa oni „vyhrajú“ nad widthalebo height, potom budú mať prednosť aspect-ratio. Povedal som ti, že to bolo trochu rozumné. ?

Podpora prehliadača

IE	Hrana	Firefox	Chrome	Safari	Opera
Nie	Nie	86 1,2,3	90 4	TP 5	Nie

Android Chrome	Android Firefox	Prehliadač Android	iOS Safari	Opera Mobile
Nie	Nie	Nie	Nie	Nie

Viac informácií

Článok z 1. júla 2020

Prvý pohľad na `pomer strán`

Sara Cope