Съотношение на страните - CSS-трикове

Свойството CSS aspect-ratioви позволява да създавате полета, които поддържат пропорционални размери, където heightи widthна кутия се изчисляват автоматично като съотношение. Това е малко математика, но идеята е, че можете да разделите една стойност на друга за това свойство и изчислената стойност гарантира, че кутията остава в това съотношение.

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

aspect-ratioе дефиниран в спецификацията за модул за оразмеряване на CSS Box Level 4, която в момента е в Работен проект Това означава, че все още е в ход и има шанс да се промени. Но с Chrome и Firefox, които го поддържат зад експериментален флаг, а Safari Technology Preview добавя поддръжка за него в началото на 2021 г., има силни сигнали, които aspect-ratioнабират много скорост.

Синтаксис

aspect-ratio: auto || ;

На обикновен английски: aspect-ratioили се приема, че е autoпо подразбиране, или приема a като стойност къде .

• Начална стойност: auto
• Прилага се за: всички елементи с изключение на вградени кутии и вътрешни кутии от рубин или маса
• Наследен: не
• Проценти: n / a
• Изчислена стойност: посочена ключова дума или чифт числа
• Тип анимация: дискретна

Стойности

/* 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;

Работи върху заменено и незаместено съдържание

Ако си мислите, „Ъъъъ, да, браузърът не прави ли това вместо нас на изображения?“ отговорът е: абсолютно . Браузърите правят някои фантастични изчисления на пропорциите на заменено съдържание като изображения. Така че, ако изображението има, да речем, ширина 500px, браузърът усъвършенства своите CSS алгоритми за оформление, за да поддържа вътрешните или „естествените“ размери на изображението. В aspect-ratioимота може да се използва ефективно да замени физическите размери.

Но незаместеното съдържание няма естествено съотношение. Това са повечето неща, с които работим, като divs. Вместо да се опитва да поддържа естествените пропорции на елемента, aspect-ratioзадава „предпочитано“ оразмеряване.

Понастоящем спецификацията отбелязва, че по-старите CSS спецификации, по-специално CSS 2.1, не съдържат ясно разграничение между заменено и незаменено съдържание. Това означава, че можем да видим някои допълнителни специални случаи, добавени към спецификацията, за да ни помогнат да ги изясним. За момента виждаме браузъри, които пускат поддръжка за задаване на предпочитани пропорции на заменени и незаменени поотделно, където някои от браузърите с ранна поддръжка зад експериментален флаг може да поддържат само aspect-ratioнезаменено съдържание. Определено си струва да следите поддръжката на браузъра, докато тя се развива.

Той работи самостоятелно, без да посочва widthилиheight

Така че, да, можем просто да го пуснем върху елемент като този:

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

... и подразбирането на елемента се включва по width: autoподразбиране, за да зададе размерите на елемента.

Променя се, когато widthили heightса на един и същ елемент

Да приемем, че имаме елемент с ширина 300pxи an aspect-ratioот 3/1.

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

По природа aspect-ratioиска да изчисли размерите на елемента сам и ще го направи въз основа на контекста, в който се използва. Но с това, което се widthхвърля, той казва съотношението на страните да изчисли полето за съотношение на аспекта на елемента, използвайки 300pxкато ширина. В резултат на това сякаш просто сме написали:

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

Това има смисъл! Не забравяйте, че когато не са посочени widthили heightса посочени, браузърът приема, че такива са autoи преминава оттам. Когато предоставяме изрични widthи heightстойности, те се използват.

В някои ситуации се пренебрегва

Тук нещата стават малко умопомрачителни, защото има случаи, в които aspect-ratioсе пренебрегва или изчисленията се влияят от други свойства. Това включва:

Когато и двете widthи heightса обявени върху елемент

Току-що видяхме как декларирането widthили heightна, и на елемент ще повлияе на изчисляването на aspect-ratio. Но ако елементът вече има и a, widthи heightте се използват вместо aspect-ratio. Той изисква и двете свойства да бъдат заменени aspect-ratio; задаването heightили widthсамостоятелно, няма да наруши съотношението на елементите.

Прави сенес, нали? Ако се използва някоя от widthили heightпринуди aspect-ratioда използва тази стойност при изчислението, логично следва, че използването на двете би заменило aspect-ratioнапълно, тъй като и двете стойности вече са предоставени и зададени.

Когато съдържанието излезе от съотношението

Просто казано, ако имате елемент със съотношение на страните и съдържанието е толкова дълго, че принуждава елемента да се разшири, тогава елементът ще се разшири. И ако елементът се разшири, размерите му се променят и по този начин няма повече съотношение. Ето защо спецификацията казва, че свойството задава „предпочитано” съотношение. Предпочита се, но не се предписва.

Не харесвате как работи това? Задаването min-height: 0;на елемента ще позволи на съдържанието да прелива предпочитаното съотношение, вместо да го разширява.

Когато „губи“ от min-*и max-*свойства

Просто видяхме как става това, нали? Когато съдържанието надвишава размерите на кутията, това на aspect-ratioпрактика изчезва, защото кутията се разширява със съдържанието. Можем да заменим това с min-width: 0.

Това е така, защото всички свойства min-*и max-*свойства обикновено се бият widthи heightза надмощие във войната над изчисленията на Box Model. Например:

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

Но:

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

Това е така, защото min-widthили предотвратява widthслизането под определена стойност, или се игнорира, тъй като widthвече е задал елемента извън минималната ширина, която трябва да бъде. Същото нещо се отнася и за min-height, max-widthи max-height.

Смисълът на всичко това: ако зададем и a min-*или max-*свойство на същия елемент като aspect-ratioи те „спечелят“ над widthили height, тогава те ще отменят aspect-ratio. Казах ти, че е малко умопомрачително. ?

Поддръжка на браузър

IE	Ръб, край	Firefox	Chrome	Сафари	Опера
Не	Не	86 1,2,3	90 4	TP 5	Не

Android Chrome	Android Firefox	Браузър за Android	iOS Safari	Opera Mobile
Не	Не	Не	Не	Не

Повече информация

Статия на 1 юли 2020 г.

Първи поглед върху „съотношението на страните“

Сара Коуп