aspect-ratio
Определение 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;
}
Страницы по теме aspect-ratio
CSS Учебник: CSS Модуль компоновки сетки
CSS object-fit свойство: CSS Object-fit свойство
CSS object-position свойство: CSS Object-position свойство