Как сделать адаптивную картинку

Две строки CSS решают главную задачу — картинка не шире своего блока и не теряет пропорции:

img {
  max-width: 100%;
  height: auto;
}

• max-width: 100% — картинка не становится шире родителя; маленькая картинка при этом не растягивается.
• height: auto — высота пересчитывается по ширине, картинка не сплющивается.

Атрибуты width и height в HTML всё равно оставляйте настоящими размерами файла: по ним браузер знает пропорции заранее и оставляет место, пока картинка грузится.

<img src="images/park.jpg" alt="Парк весной" width="1600" height="900">

Картинка-обложка нужной формы

Когда у карточек разные фотографии, а рамка под них одна — например, 16 на 9, — помогают aspect-ratio и object-fit:

.card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

aspect-ratio задаёт пропорции блока, object-fit: cover заполняет его картинкой целиком, обрезая лишнее по краям. object-fit: contain вместо этого покажет картинку целиком, оставив пустые поля.

Разные файлы для разных экранов

Телефону незачем качать фотографию шириной 2000 пикселей. Атрибут srcset перечисляет варианты одного снимка, а браузер сам выбирает подходящий по ширине экрана и плотности пикселей:

<img
  src="images/park-800.jpg"
  srcset="images/park-400.jpg 400w, images/park-800.jpg 800w, images/park-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Парк весной"
  width="1600"
  height="900">

• 400w, 800w — настоящая ширина каждого файла в пикселях;
• sizes — какой ширины картинка будет на странице: на экранах до 600 пикселей — во всю ширину окна (100vw), на остальных — 600 пикселей;
• src — запасной вариант для очень старых браузеров.

Файлы разных размеров готовят заранее в любом графическом редакторе.

Разные картинки: тег picture

Если на телефоне нужен другой кадр (например, крупный план вместо широкой панорамы) или другой формат, — тег <picture>:

<picture>
  <source media="(max-width: 600px)" srcset="images/park-square.jpg">
  <source srcset="images/park.webp" type="image/webp">
  <img src="images/park.jpg" alt="Парк весной" width="1600" height="900">
</picture>

Браузер берёт первый подходящий <source>, а если ни один не подошёл — <img>. Сам <img> внутри обязателен: именно он показывает картинку, а alt и размеры пишутся у него.

Подводные камни

• Картинка сплющилась — задана height в CSS без height: auto, или ширина и высота заданы в CSS обе с неверными пропорциями.
• Картинка всё равно вылезает — шире экрана оказался сам родитель (у него жёсткая ширина в пикселях), или правило max-width: 100% перебито более точным селектором. Выберите картинку и её родителей в инструментах разработчика (F12) и посмотрите, у кого ширина больше экрана.
• Фоновая картинка — это не <img>, ей нужны другие свойства: background-size: cover. Подробно — в справке Как сделать фон картинкой.