Poměr stran - Triky CSS

Vlastnost CSS aspect-ratiovám umožňuje vytvářet pole, která zachovávají proporcionální rozměry, kde pole heighta widthpole se počítá automaticky jako poměr. Je to trochu matematika, ale myšlenka je, že na této vlastnosti můžete rozdělit jednu hodnotu druhou a vypočítaná hodnota zajistí, že rámeček zůstane v tomto poměru.

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

aspect-ratioje definován ve specifikaci CSS Box Sizing Module Level 4, která je aktuálně v pracovní verzi. To znamená, že stále probíhá a má šanci se změnit. Ale protože jej Chrome a Firefox podporují za experimentální vlajkou a Safari Technology Preview přidává podporu pro něj počátkem roku 2021, existují silné signály, které aspect-ratiozískávají velkou dynamiku.

Syntax

aspect-ratio: auto || ;

V jednoduché angličtině: aspect-ratiobuď se předpokládá, že je autove výchozím nastavení, nebo přijímá a jako hodnotu kde .

• Počáteční hodnota: auto
• Platí pro: všechny prvky kromě vložených polí a vnitřních rubínových nebo tabulkových polí
• Zděděno: ne
• Procenta: n / a
• Vypočítaná hodnota: zadané klíčové slovo nebo dvojice čísel
• Typ animace: diskrétní

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 nahrazeném a nenahrazeném obsahu

Pokud si myslíte: „Uhm, jo, nedělá to pro nás prohlížeč na obrázcích?“ odpověď je: absolutně . Prohlížeče provádějí některé fantastické výpočty poměru stran u nahrazeného obsahu, jako jsou obrázky. Pokud má tedy obrázek, řekněme, šířku 500 pixelů, prohlížeč ohne své algoritmy rozvržení CSS tak, aby zachoval vnitřní nebo „přirozené“ rozměry obrazu. aspect-ratioVlastnost může být použita k účinnému potlačení těchto přírodních rozměrů.

Ale obsah non-nahradil nemá přirozený podíl. To je většina věcí, se kterými pracujeme, jako divy. Spíše než se snažit zachovat přirozené proporce prvku, aspect-rationastaví „preferovanou“ velikost.

Specifikace nyní uvádí, že starší specifikace CSS, zejména CSS 2.1, neobsahují jasný rozdíl mezi nahrazeným a nenahrazeným obsahem. To znamená, že jsme mohli vidět některé další speciální případy přidané do specifikace, abychom je pomohli objasnit. Prozatím vidíme, že prohlížeče zavádějí podporu pro nastavení preferovaných poměrů stran na nahrazené a nenahrazené samostatně, kde některé prohlížeče s časnou podporou za experimentálním příznakem mohou podporovat aspect-ratiopouze nenahrazený obsah. Při vývoji se rozhodně vyplatí sledovat podporu prohlížeče.

Funguje samostatně bez zadání a widthneboheight

Takže jo, můžeme to jednoduše umístit na prvek jako je tento:

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

… A výchozí nastavení prvku se implicitně width: autospustí a nastaví rozměry prvku.

Změní se, když jsou widthnebo heightjsou na stejném prvku

Řekněme, že máme prvek s šířkou 300pxa aspect-ratioz 3/1.

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

Přirozeně aspect-ratiochce vypočítat rozměry prvku samostatně a bude tak činit na základě kontextu, kde je použit. Ale s tím widthhodil, říká poměr stran k výpočtu pole poměru stran prvku pomocí 300pxjako šířka. Výsledkem je, že jsme právě napsali:

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

To dává smysl! Pamatujte, že pokud nejsou zadány žádné widthnebo heightjsou, prohlížeč předpokládá, že jsou autoa jde odtud. Když poskytneme explicitní hodnoty widtha heighthodnoty, jsou to právě to, co se zvykne.

V některých situacích je ignorována

To je místo, kde se věci trochu zamotají, protože existují případy, kdy aspect-ratioje přehlédnut nebo jsou jeho výpočty ovlivněny jinými vlastnostmi. To zahrnuje:

Když jsou oba widtha heightjsou deklarovány na prvku

Právě jsme viděli, jak deklarace buď widthnebo heightna a element ovlivní výpočet aspect-ratio. Ale pokud prvek již má a widtha height, ty se zvyknou místo aspect-ratio. Vyžaduje přepsání obou vlastností aspect-ratio; nastavení buď heightnebo widthsamostatně nezruší poměr stran prvku.

Dělá sny, že? Pokud použijete buď widthnebo heightvynutíte aspect-ratiopoužití této hodnoty ve výpočtu, pak logicky vyplývá, že použití obou by úplně přepsalo aspect-ratioúplně, protože obě hodnoty jsou již poskytnuty a nastaveny.

Když obsah vybočí z poměru

Jednoduše řečeno, pokud máte prvek s poměrem stran a obsah je tak dlouhý, že nutí prvek se rozbalit, pak se prvek rozbalí. A pokud se prvek rozbalí, změní se jeho rozměry, a tedy už žádný poměr stran. To je důvod, proč specifikace říká, že vlastnost nastavuje „preferovaný“ poměr stran. Je to upřednostňováno, ale není předepsáno.

Nelíbí se vám, jak to funguje? Nastavení min-height: 0;prvku umožní obsahu přetéct upřednostňovaný poměr stran místo jeho rozšiřování.

Když to „ztratí“ min-*a max-*vlastnosti

Jen jsme trochu viděli, jak to funguje, že? Když obsah přesáhne rozměry pole, aspect-ratioje fakticky pryč, protože se pole rozšiřuje o obsah. Můžeme to přepsat min-width: 0.

To proto, že všechny min-*a max-*vlastnosti typicky bitva widtha heighto nadvládu ve válce nad výpočty box model. Například:

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

Ale:

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

To proto, že min-widthbuď brání v překročení widthurčité hodnoty, nebo je ignorováno, protože widthsada již nastavila prvek nad minimální šířku, kterou potřebuje. Totéž platí pro min-height, max-widtha max-height.

Smysl toho všeho: pokud nastavíme vlastnost a min-*nebo max-*vlastnost na stejný prvek jako aspect-ratioa ony „vyhrají“ nad widthnebo height, pak budou mít přednost aspect-ratio. Říkal jsem ti, že to bylo trochu bláznivé. ?

Podpora prohlížeče

TJ	Okraj	Firefox	Chrome	Safari	Opera
Ne	Ne	86 1,2,3	90 4	TP 5	Ne

Android Chrome	Android Firefox	Prohlížeč Android	iOS Safari	Opera Mobile
Ne	Ne	Ne	Ne	Ne

Více informací

Článek 1. července 2020

První pohled na „poměr stran“

Sara Cope