Однос ширине и висине - ЦСС-трикови

Својство ЦСС aspect-ratioвам омогућава да креирате оквире који одржавају пропорционалне димензије где се heightи widthоквир аутоматски израчунавају као однос. Мало је математике, али идеја је да на овом својству можете да поделите једну вредност са другом, а израчуната вредност осигурава да оквир остане у том пропорцији.

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

aspect-ratioје дефинисано у спецификацији ЦСС модула за димензионисање оквира нивоа 4, која је тренутно у радној верзији. То значи да је још увек у току и има шансе да се промени. Али с Цхроме-ом и Фирефок-ом који га подржавају иза експерименталне заставице, а Сафари Тецхнологи Превиев додаје подршку за њега почетком 2021. године, постоје снажни сигнали који aspect-ratioдобијају пуно маха.

Синтакса

aspect-ratio: auto || ;

Једноставним енглеским језиком: aspect-ratioпретпоставља се да autoје подразумевано или прихвата а као вредност вхере .

• Почетна вредност: auto
• Односи се на: све елементе осим уградних кутија и унутрашњих рубин или стоних кутија
• Наследио: не
• Проценти: н / а
• Израчуната вредност: наведена кључна реч или пар бројева
• Тип анимације: дискретна

Вредности

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

Ради на замењеном и незамењеном садржају

Ако размишљате: „Ухм, да, зар прегледач то већ не ради на сликама?“ одговор је: апсолутно . Прегледачи раде неке фантастичне прорачуне пропорција на замењеном садржају попут слика. Дакле, ако слика има, рецимо, ширину од 500 пк, прегледач прилагођава своје алгоритме ЦСС распореда да би одржао унутрашњу или „природну“ димензију слике. aspect-ratioИмовина може да се користи за ефикасно заменити оне природне димензије.

Али незамењени садржај нема природну пропорцију. То је већина ствари са којима радимо, попут див-ова. Уместо да покушава да одржи природне пропорције елемента, aspect-ratioпоставља „пожељно“ величину.

Сада спецификација тренутно примећује да старије ЦСС спецификације, посебно ЦСС 2.1, не садрже јасну разлику између замењеног и незамењеног садржаја. То значи да бисмо могли да видимо неке додатне посебне случајеве који су додати у спецификацију да би им помогли да их разјаснимо. За сада видимо да прегледачи избацују подршку за подешавање жељених односа ширине и висине на замењеним и незамењеним одвојено, где неки од прегледача са раном подршком иза експерименталне заставице могу подржати само aspect-ratioнезамењени садржај. Дефинитивно вреди пазити на подршку прегледача како се она развија.

Ради самостално без навођења знака widthилиheight

Дакле, да, можемо га једноставно испустити на елемент попут овог:

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

... и подразумевано се елемент width: autoуводи имплицитно да би се поставиле димензије елемента.

Мења се када је widthили heightје на истом елементу

Рецимо да имамо елемент ширине од 300pxи 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. Али, ако је елемент већ има и 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за превласт у рату над прорачунима кутија Модел. На пример:

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

Али:

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

То је зато min-widthшто спречава widthпад испод одређене вредности или се занемарује јер widthје елемент већ поставио елемент изнад минималне ширине која треба да буде. Иста ствар важи и за min-height, max-width, и max-height.

Поента свега: ако поставимо и својство min-*или max-*својство на исти елемент као aspect-ratioи они „победе“ widthили heightће их надвладати aspect-ratio. Рекао сам ти да је то мало паметно. ?

Подршка прегледача

ИЕ	Ивица	Фирефок	Хром	Сафари	Опера
Не	Не	86 1.2,3	90 4	ТП 5	Не

Андроид Цхроме	Андроид Фирефок	Андроид претраживач	иОС Сафари	Опера Мобиле
Не	Не	Не	Не	Не

Више информација

Чланак 1. јула 2020

Први поглед на „однос пропорција“

Сара Цопе