Как сделать адаптивную (резиновую) картинку, чтобы не вылезала?
Вставляю фото, а на телефоне оно вылезает за края экрана и появляется горизонтальная прокрутка. Как сделать, чтобы картинка подстраивалась под ширину контейнера и не ломала вёрстку?
2 ответа
Классический рецепт резиновой картинки — две строчки CSS:
img {
max-width: 100%; /* не шире своего контейнера */
height: auto; /* высота меняется пропорционально */
}
max-width: 100% запрещает картинке быть шире родителя — если фото 2000px, а блок 400px, оно ужмётся до 400px. height: auto сохраняет пропорции, чтобы изображение не сплющивалось. Именно отсутствие этого правила и даёт горизонтальную прокрутку на телефоне.
Если картинка работает фоном-обложкой в блоке фиксированной высоты, используйте object-fit:
.thumb {
width: 100%;
height: 200px;
object-fit: cover; /* заполнить, обрезав лишнее */
}
object-fit: cover масштабирует фото так, чтобы закрыть весь блок без искажений (края обрежутся); contain впишет целиком, оставив поля.
Для полноценной адаптивности (отдавать мелкое фото мобильным, чтобы экономить трафик) есть атрибуты HTML:
<img src="small.jpg"
srcset="small.jpg 480w, large.jpg 1200w"
sizes="(max-width: 600px) 480px, 1200px"
alt="описание">
Но для большинства случаев max-width: 100%; height: auto; решает 90% проблем с «вылезающими» картинками.
Если горизонтальный скролл всё равно остался, проверьте не только картинки: его часто дают элементы с фиксированной шириной больше экрана, отрицательные margin или таблицы. Быстрый способ поймать виновника — временно поставить * { outline: 1px solid red; } и посмотреть, что торчит за правый край. А картинкам глобально пропишите img { max-width: 100%; display: block; } — display: block заодно убирает мелкий зазор снизу.