CSS Бесплатно, без регистрации

Генератор CSS aspect-ratio и object-fit

Картинки сплющиваются, растягиваются или вызывают дергание страницы при загрузке? Свойства aspect-ratio и object-fit: cover решают проблему адаптивных медиа навсегда. Настройте точку фокуса и получите готовый CSS.

Результат

Готовый CSS-код

/* Müasir responsiv media bloku */
.media-card {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 9; /* Sıfır CLS sıçrayışı */
  overflow: hidden;
  border-radius: 12px;
}

.media-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Təhrif olmadan kəsilir */
  object-position: 50% 50%; /* Fokus mərkəzi */
}

Как пользоваться

Выберите готовую пропорцию (16:9 YouTube, 1:1 аватар, 4:3 классика, 9:16 Shorts/Reels или 21:9 кинематограф).
Переключайте режим object-fit (cover, contain, fill, none) и оцените разницу между чистым кадрированием и искажением.
Кликните на любое место превью или двигайте ползунки, чтобы переместить прицел фокуса object-position.
Меняйте ширину контейнера, проверяйте статус защиты от CLS и скопируйте чистый CSS-код.

Как это работает

Что делает свойство aspect-ratio?

Свойство aspect-ratio задает идеальное соотношение сторон блока (ширина / высота), например 16 / 9 или 1 / 1. Больше не нужны громоздкие хаки с padding-top: 56.25% — браузер мгновенно резервирует место под медиа-контент еще до его скачивания.

Как устранить сдвиг макета (CLS)?

Cumulative Layout Shift (CLS) — один из ключевых показателей Core Web Vitals от Google. Если у картинки нет пропорции, при медленном интернете весь текст резко прыгает вниз. Задав aspect-ratio, вы гарантируете нулевой скачок верстки.

/* Картинка никогда не сдвинет контент при загрузке */
.post-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Связка object-fit и object-position

object-fit: cover работает для тегов <img> и <video> так же, как background-size: cover для фона: изображение масштабируется без искажений, обрезая края. Свойство object-position указывает координаты фокуса, гарантируя, что лица или ключевые детали останутся в кадре.

.user-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%; /* Фокус на лице вверху */
}

Частые вопросы

В чем разница между object-fit: fill и cover?

Значение fill сплющивает или неестественно растягивает изображение, нарушая соотношение сторон. Значение cover полностью сохраняет исходные пропорции, аккуратно срезая лишние края.

Поддерживается ли aspect-ratio в Safari?

Да, полная поддержка доступна в Safari начиная с версии 15 (выпущена в 2021 году). На сегодняшний день глобальная поддержка свойства превышает 96%.

Можно ли применять aspect-ratio к iframe с YouTube?

Да, iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; } — это современный золотой стандарт адаптивных видеоплееров.

Эта тема в курсе HTML и CSS

Другие CSS-инструменты