Нужно, чтобы элемент 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%;
}
И как оно видно на фото?
ОтветитьУдалить