Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
aspect-ratio — это CSS свойство, которое позволяет задать соотношение сторон элемента, автоматически вычисляя один из размеров на основе другого. Это особенно полезно для создания адаптивных изображений, видео и контейнеров.
aspect-ratio определяет предпочтительное соотношение ширины к высоте элемента. Браузер автоматически вычисляет один из размеров, если задан другой.
.element {
aspect-ratio: 16 / 9; /* ширина / высота */
aspect-ratio: 1 / 1; /* квадрат */
aspect-ratio: 4 / 3; /* классическое соотношение */
aspect-ratio: auto; /* по умолчанию */
}
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
Результат: Контейнер всегда будет иметь соотношение сторон 16:9, независимо от ширины экрана.
.image-wrapper {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
| Соотношение | CSS значение | Использование |
|---|---|---|
| 1:1 | aspect-ratio: 1 / 1 | Квадратные изображения, аватары |
| 4:3 | aspect-ratio: 4 / 3 | Классические фотографии, старые мониторы |
| 16:9 | aspect-ratio: 16 / 9 | Видео, современные экраны |
| 21:9 | aspect-ratio: 21 / 9 | Ультраширокие экраны, кинематографический формат |
| 3:2 | aspect-ratio: 3 / 2 | Фотографии, печать |
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/..."
frameborder="0"
allowfullscreen>
</iframe>
</div>
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
position: relative;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="product-grid">
<div class="product-card">
<div class="product-image">
<img src="product.jpg" alt="Товар">
</div>
<div class="product-info">
<h3>Название товара</h3>
<p>Цена: 1000₽</p>
</div>
</div>
</div>
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.product-card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
}
.product-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0f0f0;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.gallery-item {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 8px;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.responsive-container {
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
}
.content-box {
width: 100%;
aspect-ratio: 1 / 1;
padding: 1rem;
box-sizing: border-box;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.grid-item {
aspect-ratio: 1 / 1;
background: #f0f0f0;
}
Если заданы и width, и height, aspect-ratio может быть переопределен:
.element {
width: 300px;
height: 200px;
aspect-ratio: 1 / 1; /* игнорируется, т.к. заданы оба размера */
}
Чтобы aspect-ratio работал, нужно задать только один размер:
.element {
width: 300px;
/* height не задан */
aspect-ratio: 1 / 1; /* высота будет 300px */
}
Для браузеров, которые не поддерживают aspect-ratio, можно использовать padding trick:
.aspect-ratio-box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 = 9/16 * 100% */
}
.aspect-ratio-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Современный подход */
@supports (aspect-ratio: 1) {
.aspect-ratio-box {
padding-bottom: 0;
aspect-ratio: 16 / 9;
}
}
:root {
--video-ratio: 16 / 9;
--image-ratio: 4 / 3;
}
.video {
aspect-ratio: var(--video-ratio);
}
.image {
aspect-ratio: var(--image-ratio);
}
aspect-ratio поддерживается в:
Для старых браузеров используйте padding trick или полифилл.
Совет:
Используйте aspect-ratio для создания адаптивных контейнеров, особенно для изображений и видео. Это современный и элегантный способ контроля соотношения сторон без необходимости задавать фиксированные размеры.