Соотношение сторон - 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 Sizing Module Level 4, которая в настоящее время находится в рабочем проекте. Это означает, что он все еще в процессе и может измениться. Но поскольку Chrome и Firefox поддерживают его за экспериментальным флагом, а Safari Technology Preview добавляет поддержку в начале 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 пикселей, браузер изменяет свои алгоритмы компоновки CSS, чтобы сохранить внутренние или «естественные» размеры изображения. aspect-ratioСвойство может быть использовано для эффективного переопределить эти естественные размеры.

Но незамещенный контент не имеет естественной пропорции. Это большая часть того, с чем мы работаем, например, div. Вместо того, чтобы пытаться сохранить естественные пропорции элемента, aspect-ratioустановите «предпочтительный» размер.

Теперь в спецификации отмечается, что старые спецификации CSS, особенно CSS 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или heighton и повлияет на вычисление 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за превосходство в войне над расчетами 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.

Суть всего этого: если мы установим и свойство min-*or max-*для того же элемента, что aspect-ratioи, и они «побеждают» widthили height, то они переопределят aspect-ratio. Сказал вам, что это было немного странно. ?

Поддержка браузера

IE	Край	Fire Fox	Хром	Сафари	Опера
Нет	Нет	86 1,2,3	90 4	TP 5	Нет

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

Дополнительная информация

Статья от 1 июля 2020 г.

Первый взгляд на `соотношение сторон`

Сара Коуп