📐 Как сохранить пропорции блока
Чтобы видео, изображение или карточка сохраняли правильную форму при изменении ширины, используйте CSS-свойство aspect-ratio.
Например, создадим блок с пропорциями 16:9:
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
Высоту указывать не нужно — браузер рассчитает её автоматически.
Чтобы изображение полностью заполняло блок:
.video img {
width: 100%;
height: 100%;
object-fit: cover;
}
Если ширина контейнера изменится, его высота подстроится с сохранением заданных пропорций.
Подходит для видео, изображений, карточек, баннеров и превью.
Сохраняйте, чтобы не потерять 📎

#css #frontend #вебразработка