Мне нужно изображение, чтобы заполнить div. Согласно этому ответу , работа была почти выполнена.
Проблема возникает, когда изображения несколько больше, чем div, в котором они содержатся. Изображения отображаются в масштабе 100%, что в моем случае не идеально.
В Firefox проблему можно решить с помощью этого CSS:
.fill img {
min-height: 100%;
}
В других браузерах (протестированных с Chrome и Edge) это решение не работает, и конечный результат такой же, как и раньше.
Есть ли способ достичь того же результата, что и в Firefox, в других браузерах?
Вот скрипка с макетом макета, демонстрирующая это поведение: https://jsfiddle.net/jqe5gfru/4/
.container {
border: 2px solid red;
width: 300px;
height: 40vh;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.item {
min-height: 100%;
}
<div class="container">
<img class="item" src="http://placekitten.com/1600/400" />
</div>
<div class="container">
<img class="item" src="http://placekitten.com/600/1200" />
</div>
Попробуйте открыть его в Firefox и другом браузере и сравните результат.