Страницы

Поиск по вопросам

четверг, 4 апреля 2019 г.

Адаптировать изображение под вьюпорт. Сохранение пропорций

Нужно, чтобы элемент img, сохраняя пропорции и находясь по центру, принимал минимально необходимый размер для заполнения родительского блока.
При попытке установить min-height и min-width по 100% изображение растягивается на всю свою величину, выходя за границы родителя сверх необходимого (да ещё и только от левого верхнего угла). Возможно ли это без скриптов?


Ответ

Можно воспользоваться object-fit: cover; и object-position: center; например:
div.a {width: 400px; height: 200px;} div.b {width: 200px; height: 400px;} div {border: 1px solid black;} div img { object-fit: cover; object-position: center; height: 100%; max-width: 100%; min-width: 100%; }


1 комментарий: