CSS и вёрстка

Картинка в блоке

Картинка и блок разной формы: что выбрать — cover, contain или scale-down, куда сместить кадр и как зарезервировать место, чтобы страница не прыгала при загрузке. С живым сравнением всех пяти значений.

Блок

Как вписывать

Куда смещать кадр

Соотношение сторон блока

«16 / 9», «4:3» или пусто

Скругление, px

Обычный выбор для обложек и карточек. Следите за тем, что обрезается: лица уезжают за край.

Все пять значений на одной картинке

cover

contain

fill

none

scale-down

Картинка одна и та же, высокая и узкая, — на ней разница видна сразу. Нажмите значение в поле выше, чтобы выбрать своё.

CSS

/* Блок задаёт размер, картинка подстраивается. Без заданного размера
   object-fit не делает ничего: подгонять не подо что. */
.thumb {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
}

.thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

Разметка

<!-- width и height у самого img — это не размер на экране, а пропорции.
     Браузер держит под картинку место заранее, и страница не прыгает при загрузке. -->
<figure class="thumb">
  <img src="/photo.jpg" alt="" width="1200" height="675" loading="lazy" decoding="async">
</figure>

То же самое фоном

background.css

/* То же самое фоном. Годится для декора, но не для содержательной картинки:
   у фона нет alt, его не прочитает экранный диктор и не покажет поиск по картинкам. */
.thumb {
  background-image: url('/photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 16 / 9;
}