aspect-ratio

❮ Назад CSS Справочник Далее ❯

Пример

Добавление соотношения сторон к элементу:

div {
aspect-ratio: 3 / 2;
}

Попробуйте сами »

Определение aspect-ratio

CSS свойство aspect-ratio позволяет вам определить соотношение между шириной и высотой элемента.

Если CSS свойства aspect-ratio и width заданы, высота будет соответствовать заданному соотношению сторон.

Чтобы лучше понять CSS свойство aspect-ratio, просмотрите демо.

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

Показ демо ❯

Значение по умолчанию:	auto
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS3
JavaScript синтаксис:	object.style.phpectRatio="16/9" Попробуй

Поддержка aspect-ratio

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
aspect-ratio	88	88	89	15	74

Синтаксис aspect-ratio

aspect-ratio: number/number|initial|inherit;

Значения aspect-ratio

Значение свойства	Описание	Демонстрация
number	Первое число указывает значение ширины в соотношении сторон.	Демо ❯
number	Второе число указывает значение высоты в соотношении сторон. Необязательный. Если не задано, число для высоты по умолчанию равно 1.	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры aspect-ratio

Пример

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

#container > div {
aspect-ratio: 3/2;
}