← Все вопросы
Как сделать картинку адаптивной, чтобы не вылезала за контейнер?
8
Загружаю большую картинку, и она вылезает за пределы блока / растягивает страницу по горизонтали на телефоне. Как заставить её подстраиваться под ширину?
4 ответа
15
Базовое правило адаптивной картинки:
img {
max-width: 100%;
height: auto;
}
max-width: 100% не даёт картинке стать шире контейнера, а height: auto сохраняет пропорции (без него картинка сожмётся по ширине, но останется высокой). Этого хватает в 90% случаев. Если нужно вписать картинку в блок фиксированного размера без искажений — добавь object-fit: cover (заполнит, обрезав края) или contain (впишет целиком).
Милана Журавлёва object-fit: cover — топ для аватарок и превью · 2 месяца назад
6
max-width: 100%; height: auto; — и картинка перестанет вылезать.
2
max-width: 100%.
-3
Поставь width: 100% — тоже растянет.
Вера Данилова width: 100% растянет МЕЛКУЮ картинку до контейнера и она замылится; нужен именно max-width: 100%, чтобы только ограничивать, а не растягивать · 2 месяца назад
Ваш ответ
Войдите, чтобы ответить на вопрос.
