Как сделать адаптивное изображение в CSS/HTML?

CSS · middle · сложность 4

Слои адаптивности

Не ломать layout: max-width: 100%; height: auto; (+ лучше явные width/height или aspect-ratio против CLS).
Правильный файл: <img srcset sizes> или <picture> с source media/type (WebP/AVIF).
Кадрирование: контейнер + object-fit: cover при фиксированной рамке.

<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  width="1200" height="800"
  alt="..."
/>

.hero img {
  width: 100%;
  height: auto;
  display: block;
}

Ошибка

Только CSS width: 100% без srcset тянет тяжёлый оригинал на мобиле. Адаптив — и про пиксели, и про вес.

Итог

CSS держит пропорции и вписывание; HTML srcset/picture выбирает ресурс. Вместе это и есть responsive image.

Загрузка…