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

Короткий ответ

max-width: 100% не даёт картинке вылезти за пределы родителя, height: auto сохраняет пропорции:

<div style="width: 240px; border: 1px dashed silver;">
  <img src="/media/photo-800x500.jpg" alt="A flower" width="800" height="500" style="max-width: 100%; height: auto;">
</div>

Обычно это правило задают сразу всем картинкам сайта: img { max-width: 100%; height: auto; }.

Зачем атрибуты width и height

Атрибуты width и height в HTML сообщают браузеру пропорции картинки ещё до её загрузки. Он заранее оставляет под неё место, и текст ниже не прыгает, когда картинка появится. CSS всё равно управляет итоговым размером.

Растянуть на всю ширину

Если картинка должна занимать весь блок даже в широком контейнере, используйте width: 100% вместо max-width:

<img src="/media/photo-600x200.jpg" alt="A banner" width="600" height="200" style="width: 100%; height: auto; border-radius: 8px;">

Для разных экранов можно отдавать файлы разного размера — об этом статья про srcset.

Частая ошибка

Задают max-width: 100%, но забывают height: auto. Ширина уменьшается, а высота из атрибута height остаётся прежней — картинка вытягивается по высоте:

<div style="width: 240px;">
  <img src="/media/photo-800x500.jpg" alt="A flower" width="800" height="500" style="max-width: 100%;">
</div>