Как max-width: 100% и height: auto помогают картинкам?

Question

Accepted Answer

## Идея

Картинка по умолчанию хочет свою intrinsic-ширину. В узком контейнере она вылезает и ломает вёрстку. Эти два правила делают изображение «резиновым».

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

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

- `max-width: 100%` — ширина не больше родителя; если картинка меньше — остаётся своей.
- `height: auto` — высота пересчитывается по пропорциям, иначе при сжатии ширины картинка исказится (если задан фиксированный `height` в HTML/CSS).

## Дополнения

Для `object-fit`/`aspect-ratio` и явных `width`/`height` в HTML (CLS) это база responsive images, но не замена `srcset`/`sizes`. У `svg`/`video` логика похожа.

## Итог

Пара `max-width: 100%` + `height: auto` — минимальный способ не дать медиа разорвать layout.