Aspect ratio css что это

Новое свойство CSS с соотношением сторон, поддерживаемое в Chromium, Safari Technology Preview и Firefox Nightly.

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Новое свойство CSS, которое помогает поддерживать интервалы в адаптивных макетах.

Уна Кравец

Примечание. Резюме. Поддержание постоянного соотношения ширины и высоты, называемого соотношением сторон , имеет решающее значение для адаптивного веб-дизайна и предотвращения совокупного смещения макета . Теперь есть более простой способ сделать это с помощью нового свойства aspect-ratio , которое появилось в Chromium 88 , Firefox 87 и Safari Technology Preview 118 .

Соотношение сторон

Соотношение сторон чаще всего выражается двумя целыми числами и двоеточием в размерах: ширина:высота или x:y. Наиболее распространенные соотношения сторон для фотографии — 4:3 и 3:2, тогда как видео и более поздние потребительские камеры, как правило, имеют соотношение сторон 16:9.

С появлением адаптивного дизайна поддержание соотношения сторон становится все более важным для веб-разработчиков, особенно потому, что размеры изображений различаются, а размеры элементов меняются в зависимости от доступного пространства.

Некоторые примеры того, когда сохранение соотношения сторон становится важным:

• Создание адаптивных iframe, где они составляют 100% ширины родительского элемента, а высота должна оставаться определенным соотношением области просмотра.
• Создание встроенных контейнеров-заполнителей для изображений, видео и вставок для предотвращения изменения макета, когда элементы загружаются и занимают место.
• Создание единообразного, адаптивного пространства для интерактивной визуализации данных или анимации SVG.
• Создание единообразного, адаптивного пространства для многоэлементных компонентов, таких как открытки или календарные даты.
• Создание однородного, адаптивного пространства для нескольких изображений разного размера (может использоваться вместе с object-fit )

Объект подходит

Определение соотношения сторон помогает нам определить размер медиафайлов в адаптивном контексте. Еще одним инструментом в этом сегменте является свойство object-fit , которое позволяет пользователям описывать, как объект (например, изображение) внутри блока должен заполнять этот блок:

initial значения и значения fill повторно настраивают изображение, чтобы заполнить пространство. В нашем примере это приводит к тому, что изображение сжимается и размывается из-за перенастройки пикселей. Не идеально. object-fit: cover использует наименьший размер изображения, чтобы заполнить пространство, и обрезает изображение, чтобы оно вписалось в него на основе этого размера. Он «увеличивает масштаб» своей нижней границы. object-fit: contain гарантирует, что все изображение всегда будет видимым, и, следовательно, противоположность cover , где он принимает размер наибольшей границы (в нашем примере выше это ширина) и изменяет размер изображения, чтобы сохранить его внутреннее соотношение сторон. при этом вписываясь в пространство. Вариант object-fit: none показывает изображение, обрезанное по центру (положение объекта по умолчанию) с его естественным размером.

object-fit: cover обычно работает в большинстве ситуаций, обеспечивая приятный однородный интерфейс при работе с изображениями разных размеров, однако при этом вы теряете информацию (изображение обрезается по самым длинным краям).

Если эти детали важны (например, при работе с ровным расположением косметических товаров), обрезка важного контента недопустима. Таким образом, идеальным сценарием будут адаптивные изображения разных размеров, которые вписываются в пространство пользовательского интерфейса без обрезки.

Старый прием: сохранение соотношения сторон с помощью padding-top

Чтобы сделать их более отзывчивыми, мы можем использовать соотношение сторон. Это позволяет нам установить определенный размер соотношения и основывать остальную часть мультимедиа на отдельной оси (высоте или ширине).

В настоящее время широко распространенное кроссбраузерное решение для поддержания соотношения сторон на основе ширины изображения известно как «Padding-Top Hack». Для этого решения требуется родительский контейнер и абсолютно размещенный дочерний контейнер. Затем можно было бы рассчитать соотношение сторон в процентах и ​​установить его в качестве padding-top . Например:

• Соотношение сторон 1:1 = 1/1 = 1 = padding-top: 100%
• Соотношение сторон 4:3 = 3/4 = 0,75 = padding-top: 75%
• Соотношение сторон 3:2 = 2/3 = 0,66666 = padding-top: 66.67%
• Соотношение сторон 16:9 = 9/16 = 0,5625 = padding-top: 56.25%

Теперь, когда мы определили значение соотношения сторон, мы можем применить его к нашему родительскому контейнеру. Рассмотрим следующий пример:

Затем мы могли бы написать следующий CSS:

.container < position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ >.media

Сохранение соотношения сторон с помощью aspect-ratio

К сожалению, вычисление этих значений padding-top не очень интуитивно понятно и требует некоторых дополнительных затрат и позиционирования. Благодаря новому встроенному свойству CSS aspect-ratio язык для поддержания пропорций стал намного понятнее.

С помощью той же разметки мы можем заменить: padding-top: 56.25% на aspect-ratio: 16 / 9 , установив для aspect-ratio указанное соотношение width / height .

Использование отступа-top
.container
Использование соотношения сторон

.container < width: 100%; aspect-ratio: 16 / 9; >

Использование aspect-ratio вместо padding-top гораздо более понятно и не требует изменения свойства отступа, чтобы сделать что-то выходящее за рамки его обычной области действия.

Это новое свойство также добавляет возможность установить соотношение сторон auto , где «заменяемые элементы с собственным соотношением сторон используют это соотношение сторон; в противном случае поле не имеет предпочтительного соотношения сторон». Если и auto , и указаны вместе, предпочтительным соотношением сторон является указанное соотношение width , разделенное на height , если только это не заменяемый элемент с собственным соотношением сторон, и в этом случае вместо этого используется это соотношение сторон.

Пример: согласованность в сетке

Это также очень хорошо работает с механизмами макетирования CSS, такими как CSS Grid и Flexbox. Рассмотрим список дочерних элементов, для которых вы хотите сохранить соотношение сторон 1:1, например сетку значков спонсоров:

.sponsor-grid < display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); >.sponsor img < aspect-ratio: 1 / 1; width: 100%; object-fit: contain; >

Изображения в сетке с родительским элементом с различными размерами соотношения сторон. См. демо на Codepen.

Пример: предотвращение смещения макета

Еще одна замечательная особенность aspect-ratio заключается в том, что оно может создавать пространство-заполнитель для предотвращения совокупного смещения макета и повышения качества веб-показателей . В этом первом примере загрузка ресурса из API, такого как Unsplash , приводит к сдвигу макета после завершения загрузки мультимедиа.

Видео совокупного смещения макета, которое происходит, когда для загруженного ресурса не установлено соотношение сторон. Это видео записано с эмулируемой сетью 3G.

С другой стороны, использование aspect-ratio создает заполнитель, чтобы предотвратить сдвиг макета:

Видео с заданным соотношением сторон устанавливается на загруженный ресурс. Это видео записано с эмулируемой сетью 3G. См. демо на Codepen.

Дополнительный совет: атрибуты изображения для соотношения сторон

Другой способ установить соотношение сторон изображения — через атрибуты изображения . Если вы заранее знаете размеры изображения, рекомендуется установить эти размеры как его width и height .

В нашем примере выше, зная размеры 800х600 пикселей, разметка изображения будет выглядеть так: . Если отправленное изображение имеет такое же соотношение сторон, но не обязательно те же точные значения пикселей, мы все равно можем использовать значения атрибутов изображения для установки соотношения в сочетании со стилем width: 100% , чтобы изображение занимало необходимое пространство. Все вместе это будет выглядеть так:

/* CSS */ img

В конечном итоге, эффект тот же, что и при установке aspect-ratio изображения с помощью CSS, и позволяет избежать совокупного сдвига макета ( см. демонстрацию на Codepen ).

Заключение

Благодаря новому свойству CSS aspect-ratio », которое запускается во многих современных браузерах, поддержание правильных соотношений сторон в ваших медиа-контейнерах и макетах становится немного проще.

Фотографии Эми Шамблен и Лайонела Гюстава через Unsplash.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2021-01-28 UTC.

Как использовать CSS aspect-ratio

Бывают случаи, когда действительно необходимо поддерживать определённое соотношение между шириной и высотой отзывчивых элементов на веб-странице. Долгое время это можно было сделать с помощью различных CSS-трюков. Свойство CSS aspect-ratio изменило ситуацию: теперь мы можем задавать соотношение сторон элемента в одной строке кода. Давайте рассмотрим, как использовать свойство aspect-ratio .

Примеры, когда соотношение сторон имеет значение

По своей природе Web — это подвижная среда, и обычно лучше позволить элементам на веб-странице быть как можно более подвижными и гибкими.

Однако иногда возникают причины для введения ограничений на размер элементов. Например, мы можем захотеть сохранить соотношение ширины и высоты некоторых элементов — таких, как отзывчивые видеоролики YouTube, элементы галереи изображений или закругленные аватары.

Давайте сначала рассмотрим три практических варианта использования CSS свойства aspect-ratio , а затем расскажем о том, как оно работает.

Отзывчивые видеоролики YouTube

Если вы когда-либо вставляли видео с YouTube на веб-страницу, то знаете, что код для вставки представляется в виде с фиксированной шириной и высотой. Это нормально, но могло бы быть и лучше. Скорее всего, его ширина не будет равна ширине вашего контейнера, что не очень приятно. Но ещё хуже то, что часть кода может быть потеряна за пределами экрана на маленьких экранах просмотра.

На самом деле мы хотим, чтобы встроенное видео заполняло определённое пространство в нашем дизайне и реагировало на различную ширину области просмотра. Для простоты предположим, что оно должно заполнять 100% ширины своего контейнера.

Рассмотрим два способа достижения этой цели — сначала старый, с помощью CSS-трюков, а затем новый, с помощью aspect-ratio .

Делаем видео на YouTube отзывчивым с помощью padding хака

YouTube предоставляет нам следующий код для встраивания (упрощённый для экономии места):

iframe width="560" height="315" src="">iframe>

Традиционным приёмом, позволяющим сделать наши вставки отзывчивыми, является padding хаком . Первое, что мы должны сделать, это разделить ширину iframe на высоту, что даст нам отношение ширины к высоте. Видеоролики YouTube обычно имеют размер 560 на 315 пикселей, поэтому нам нужно разделить 315 на 560, что даст нам .5625 . Это означает, что высота нашего iframe YouTube составляет 56,25% от его ширины. Это соотношение составляет 16:9, поэтому не забывайте об этом.

Теперь мы можем настроить нашу отзывчивую вставку YouTube в несколько шагов. Во-первых, мы обернём элемент вокруг iframe , например div :

div> 
iframe>iframe> 
div>

Затем мы устанавливаем для div значение position: relative и задаём ему нижний padding 56,25% . Браузер вычислит это процентное значение на основе ширины div :

div  
position: relative; 
padding-bottom: 56.25%; 
>

На рисунке ниже показан div c отступом, выделенный зелёным цветом с помощью средств разработчика браузера.

Примечание: если вы не хотите возиться с вычислением процентного соотношения подкладок, вы можете позволить браузеру сделать это за вас. Просто вставьте ширину и высоту iframe следующим образом: padding-bottom: calc(315 / 560 * 100%) .

Далее мы устанавливаем для iframe значение position: absolute и задаём его ширину и высоту равными 100% :

iframe  
position: absolute; 
width: 100%; 
height: 100%; 
>

Теперь наша вставка YouTube будет отзывчивой, заполняя 100% ширины контейнера независимо от размера экрана, сохраняя при этом соотношение сторон, как показано ниже.

Примечание: существует множество других способов реализации padding хака, например, использование ::before или ::after вместо дополнительного div . Их легко найти в Интернете по запросу padding hack .

Делаем видео на YouTube отзывчивым с помощью aspect-ratio

С помощью CSS свойства aspect-ratio мы можем сделать видео на YouTube отзывчивым, используя гораздо меньше кода. Больше не нужна обёртка из div . Можно просто установить следующие стили для iframe :

iframe  
width: 100%; 
aspect-ratio: 16/9; 
>

Классно. Проверьте это на CodePen.

Если вы не знаете соотношения сторон элемента и не хотите доставать калькулятор, можно предоставить браузеру возможность самому определить это соотношение, используя ширину и высоту элемента. Вот вариант приведённого выше CSS:

iframe  
--ratio: calc(315 / 560); 
width: 100%; 
aspect-ratio: 1/var(--ratio); 
>

Мы знаем исходные ширину и высоту нашего iframe , поэтому вставляем их в пользовательское свойство ( —ratio ), разделив высоту на ширину с помощью функции calc() . Затем используем пользовательское свойство в CSS-переменной как часть aspect-ratio . Теперь наше значение соотношения сторон, по сути, равно 1/0,5625 . Таким образом, мы можем использовать числа с плавающей точкой в значениях aspect-ratio . (Конечно, если вы хотите применить это соотношение к другим элементам, то объявите пользовательское свойство для родительского элемента, расположенного выше по дереву, или для самого элемента :root ).

Ещё одна вариация на эту тему — просто использовать calc() без пользовательского свойства:

iframe  
width: 100%; 
aspect-ratio: 1/calc(315 / 560); 
>

Это хорошо, если мы используем это значение соотношения сторон только для iframe .

Повеселитесь и попробуйте эти варианты в приведённой выше демонстрации CodePen.

Отзывчивая галерея изображений

Допустим, мы хотим отобразить галерею изображений в виде серии гибких квадратных боксов. Чтобы сохранить квадратность боксов, можно воспользоваться padding хаком, но вместо этого можно использовать aspect-ratio . (Изображения взяты из моего недавнего туристического похода с помощью сайта Unsplash).

ul> 
li>img src="1.jpg" alt="">li> 
li>img src="2.jpg" alt="">li> 
⋮ 
li>img src="11.jpg" alt="">li> 
li>img src="12.jpg" alt="">li> 
ul>

Вот ключевой CSS:

ul  
display: grid; 
> 
 
li  
aspect-ratio: 1/1; 
> 
 
img  
object-fit: cover; 
>

Приведённая ниже демонстрация CodePen показывает этот код в действии.

Это очень простой демонстрационный пример. Столбцы сетки имеют ширину 1fr , а aspect-ratio: 1/1 гарантирует, что ячейки останутся идеально квадратными, независимо от ширины или ширины браузера. Это очень удобный способ управления высотой строк сетки.

Все изображения имеют произвольные размеры (ни одно из них не квадратное), поэтому они вписываются в ячейку сетки с помощью функции object-fit: cover . (Ознакомьтесь с тем, как использовать CSS object-fit , если это для вас в новинку. Галерея также выравнивается по центру с помощью Grid).

Попробуйте поиграть со свойством aspect-ratio в демонстрационном примере выше. Что произойдёт, если изменить значение с 1/1 на 2/1 и т.д.?

Поддержание постоянных размеров аватаров с помощью aspect-ratio

В своей недавно вышедшей книге Unleashing the Power of CSS Стефани Эклз демонстрирует использование свойства aspect-ratio для обеспечения согласованных размеров аватара. С помощью свойства aspect-ratio в сочетании со свойством object-fit мы можем обеспечить постоянный размер аватара независимо от соотношения исходного изображения и без его искажения.

Вот ключевой CSS:

img  
aspect-ratio: 1; /* то же, что и aspect-ratio: 1/1 - см. ниже */ 
object-fit: cover; 
border-radius: 50%; 
width: 100%; 
height: 100%; 
>

На следующем примере CodePen это показано в действии.

В качестве эксперимента попробуйте закомментировать строку aspect-ratio: 1 ; в приведённом выше CodePen и посмотреть, что получится без неё! (Её можно отключить, просто добавив символ / спереди: /aspect-ratio: 1; ).

Полезные сведения об aspect-ratio

Каждый элемент имеет соотношение сторон. Если мы не задаём соотношение сторон элемента, то по умолчанию его соотношение сторон принимает значение auto . Если этот элемент является заменяемым элементом, например, изображением, то его соотношение сторон определяется его естественной шириной и высотой. (Это соотношение сохранится, даже если мы зададим другую ширину или высоту с помощью CSS).

Соотношение сторон сравнивает ширину (x) с высотой (y), при этом между двумя значениями ставится знак / : x/y . По обе стороны от косой черты могут стоять пробелы: x / y . Если указано только одно значение, то оно представляет собой x, а значение y считается равным 1. Таким образом, aspect-ratio: 1 равно aspect-ratio: 1/1 , а aspect-ratio: 2 равно aspect-ratio: 2/1 .

Значение aspect-ratio может включать слово auto — например, aspect-ratio: auto 1/2 . Значение auto будет применяться к заменяемым элементам, таким как изображения и видео. (Другими словами, элемент сохранит своё естественное соотношение сторон). Соотношение 1/2 будет применяться к незамещённым элементам, таким как div .

Значения могут включать числа с плавающей точкой, например 0,5 , как мы видели выше. Таким образом, aspect-ratio: 1.5/1 является допустимым и эквивалентно aspect-ratio: 3/2 .

Мы также можем использовать var() и calc() как часть значений aspect-ratio , как показано выше.

Для незамещённых элементов, таких как div , не нужно задавать ширину, чтобы соотношение сторон вступило в силу. Если заданы ширина или высота, то соотношение сторон будет основано на них. Если для элемента заданы и ширина, и высота, то любое значение aspect-ratio будет проигнорировано. Также можно столкнуться с неожиданными результатами при применении комбинаций ширины, высоты, max-width и min-width к контейнерам вместе с aspect-ratio , как обсуждается в этой ветке форума SitePoint.

Задавать высоту для элементов контейнера всегда опасно, так как это может привести к высыпанию содержимого за пределы контейнера. Интересно, что если применить соотношение сторон к контейнеру и содержимое не поместится, то контейнер расширится. Таким образом, как сказано в спецификации, aspect-ratio устанавливает предпочтительное ограничение, а не фиксированное. Это можно отменить, установив для контейнера значение overflow: auto .

Заключение

CSS свойство aspect-ratio поддерживается во всех современных браузерах, поэтому его можно смело использовать. Но если вы хотите быть ультраконсервативными и учитывать особенности старых версий браузеров, то padding хак является надёжным запасным вариантом.

Более подробную информацию о css свойстве aspect-ratio можно найти в справочнике MDN, а также в спецификации W3C.

Если вы хотите узнать больше об интересных возможностях CSS, рекомендую вам ознакомиться с книгой Unleashing the Power of CSS , в которой Стефани Эклз рассказывает обо всех удивительных инновациях, позволяющих сэкономить время, появившиеся в CSS в последнее время.

aspect-ratio

Устанавливает соотношение сторон элемента в виде отношения его ширины к высоте. aspect-ratio не оказывает влияния на размеры в следующих ситуациях.

• У элемента заданы свойства width и height. В этом случае соотношение сторон браузер определяет как width / height.
• У изображения не задана ширина и высота. В этом случае изображения отображаются в их исходном размере.

Краткая информация

Значение по умолчанию	auto
Наследуется	Да
Применяется	Ко всем элементам, за исключением строчно-блочных
Анимируется	Нет

Синтаксис

aspect-ratio: auto || ;

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

auto Элемент не имеет предпочитаемого соотношения сторон и браузер устанавливает его автоматически, исходя из ширины и высоты элемента. Соотношение записывается в виде 16 / 9, здесь первое число это ширина, а второе число — высота. Если какое-то значение не указано, то оно считается равным 1. Также некоторые соотношения допустимо записывать одним числом. Например, 2/1 можно записать как 0.5, это даст одинаковый результат. auto && Если соотношение сторон идёт вместе с ключевым словом auto (пример: auto 1/2), то будет выбираться указанное соотношение, но для заменяемых элементов (таких как изображения и видео) с собственным соотношением будет использоваться оно. Таким образом значение an auto применяется к изображениям, видео, фреймам и другим заменяемым элементам, а значение 1/2 ко всем остальным элементам.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

1/1 2/1 4/3 16/9 21/9

Пример

В данном примере свойство aspect-ratio позволяет сделать круглую кнопку без явных указаний её размеров.

Объектная модель

Объект.style.aspectRatio

Спецификация

Спецификация	Статус
CSS Box Sizing Module Level 4	Редакторский черновик

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

88

88

74

15

89

88

115

73

15

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::marker
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :dir
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• accent-color
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphenate-character
• hyphenate-limit-chars
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

aspect — ratio

Код ниже стилизует блок так, что его высота будет равна его ширине:

 .container  width: 200px; aspect-ratio: 1 / 1;> .container  width: 200px; aspect-ratio: 1 / 1; >    Скопировать Скопировано Не удалось скопировать   

Подобное поведение можно получить и в случае, когда задана только высота:

 .container  height: 200px; aspect-ratio: 1 / 1;> .container  height: 200px; aspect-ratio: 1 / 1; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• auto — соотношение сторон считается автоматически.
• / — соотношение сторон всегда считается относительно ширины и высоты блока.
• auto / — совмещённая запись.

При совмещённой записи соотношение / приоритетнее, но когда у элемента есть собственное соотношение сторон, применится оно:

Чтобы избежать искажений картинки, можно использовать свойство object — fit .

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство вычисляет незаданную сторону, исходя из размера уже известной. Возьмём пример с aspect — ratio : 2 / 1 :

 .container  width: 200px; aspect-ratio: 2 / 1;> .container  width: 200px; aspect-ratio: 2 / 1; >    Скопировать Скопировано Не удалось скопировать   

Соотношение сторон в этом случае — 2 / 1 . Такому соотношению должны равняться и стороны блока: / .

Нам известна ширина — 200px .

Отсюда получаем высоту блока — 100px .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Свойство нельзя применить к строчным элементам.

�� Хотя большинство значений поддерживается основными браузерами, с некоторыми могут быть трудности. Поэтому на всякий случай проверяйте поддержку на Can I use.