Картинка по умолчанию не подстраивается под размер блока - у неё есть собственная ширина в пикселях, и если она больше, чем блок или экран, она просто вылезает за его пределы. Решает это одно CSS-правило: max-width: 100%. Это и есть третий компонент адаптивного дизайна - гибкие изображения, наравне с гибкими макетами и медиа-запросами из прошлых уроков.
В этом уроке
Попробуй прямо сейчас: подвигай ползунок. Верхняя картинка всегда остаётся 400px шириной и вылезает за рамку сильнее и сильнее, а нижняя - с max-width: 100% и height: auto - каждый раз по-настоящему пересчитывает свою ширину под рамку, сохраняя пропорции. Цифры под картинками реальные, их вычисляет браузер.
max-width: 100% и height: auto - базовое решение
У тега img есть собственная, "естественная" ширина - размер файла в пикселях. Без единого CSS-правила браузер покажет картинку именно в этом размере, даже если она гораздо шире родительского блока или экрана телефона - именно поэтому картинка иногда буквально "вылезает" за край страницы. Гибкие изображения - третий из трёх классических компонентов адаптивного дизайна, наравне с гибкими макетами на относительных единицах и медиа-запросами - на этом уроке разбирается последний из них. Решение - одно правило: max-width: 100% запрещает картинке быть шире родителя, а height: auto обязательно идёт рядом, чтобы высота пересчитывалась пропорционально и картинка не сплющивалась.
img { max-width: 100%; height: auto; } - универсальное правило, которое стоит добавлять почти всегда.
img { width: 100%; } без height: auto - если у родителя задана ещё и фиксированная высота, картинка может исказиться и потерять пропорции.
object-fit: cover и contain для строгих рамок
max-width: 100% отлично работает, когда высота блока может быть любой. Но если рамка жёстко задана в обе стороны (например, квадратная карточка 120×120px под аватарку), а картинка имеет другие пропорции, простого масштабирования недостаточно - на помощь приходит object-fit. Значение contain вписывает картинку ЦЕЛИКОМ, ничего не обрезая - но если пропорции не совпадают, по краям останутся пустые полосы цвета фона. Значение cover, наоборот, заполняет рамку ПОЛНОСТЬЮ без единого зазора, но обрезает те части картинки, которые не помещаются.
.avatar { width: 120px; height: 120px; object-fit: cover; } - квадратная аватарка без пустых полос, лишнее по краям обрежется.
.avatar { width: 120px; height: 120px; object-fit: contain; } для аватарки - если пропорции фото не квадратные, по бокам или сверху/снизу появятся пустые полосы цвета фона блока.
Атрибуты width/height в HTML - зачем их оставлять
Раз размер всё равно управляется через CSS, кажется логичным убрать атрибуты width и height прямо из тега img в HTML. На практике это частая ошибка: пока картинка не загрузилась, браузер не знает её реальных пропорций и первым делом отрисовывает блок нулевой высоты - а когда картинка наконец подгружается, весь текст под ней резко "прыгает" вниз. Если же атрибуты width и height в HTML оставить (даже если CSS потом их переопределяет через max-width и height: auto), современный браузер заранее резервирует место с правильными пропорциями и ничего не прыгает.
<img src="cat.jpg" width="800" height="600" style="max-width:100%;height:auto"> - реальные пропорции файла в HTML + гибкость в CSS.
<img src="cat.jpg" style="max-width:100%;height:auto"> без атрибутов - до загрузки картинки браузер не знает её высоту, и остальной контент страницы может дёрнуться при появлении картинки.
img { max-width: 100%; } стало известным благодаря статье Итана Маркотта "Fluid Images" от 7 июня 2011 года - но сам Маркотт честно указывает в тексте, что технику "впервые обнаружил дизайнер Ричард Раттер", а не он. Получается, что человек, который годом ранее сделал термин "гибкие изображения" всемирно известным своей статьёй "Responsive Web Design", не был автором лежащей в его основе техники - он её популяризировал, а не изобрёл.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Не задают картинке никаких ограничений по ширине | Картинка вылезает за пределы блока или экрана на маленьких устройствах | Добавить img { max-width: 100%; height: auto; } |
| Используют object-fit: cover там, где обрезка недопустима | Важная часть картинки (например, лицо у самого края кадра) уходит за пределы видимой рамки | Использовать object-fit: contain или заранее кадрировать картинку по центру важного объекта |
| Задают max-width без height: auto | Если у родителя есть ещё и фиксированная высота, картинка искажается и теряет пропорции | Всегда указывать max-width: 100% вместе с height: auto |
| Убирают width/height из HTML, полагаясь только на CSS | При загрузке страницы контент "прыгает" вниз в момент, когда картинка наконец подгрузилась | Оставлять реальные width/height в HTML, адаптивность делать отдельно через CSS |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Картинка не шире родителя | img { max-width: 100%; } |
| Сохранить пропорции при масштабировании | height: auto (вместе с max-width) |
| Заполнить строгую рамку без пустых полос | object-fit: cover (обрежет лишнее) |
| Вписать картинку целиком без обрезки | object-fit: contain (может оставить пустые поля) |
| Не дать странице "прыгать" при загрузке | Не убирать width/height из HTML, даже если CSS их переопределяет |
Коротко: отвечаем на вопросы
Почему картинка вылезает за пределы блока?
У тега img есть собственная ширина в пикселях, и без специальных CSS-правил браузер показывает картинку именно в этом размере, даже если он больше, чем родительский блок. Решает это правило img { max-width: 100%; height: auto; }, которое запрещает картинке быть шире родителя.
В чём разница между object-fit: cover и object-fit: contain?
contain вписывает картинку целиком без обрезки, но может оставить пустые полосы цвета фона по краям, если пропорции не совпадают с рамкой. cover, наоборот, заполняет рамку полностью без единого зазора, но обрезает те части картинки, которые не помещаются.
