html - object-fit 对图像没有调整大小的影响

Question

我需要让一个 img 填充一个 div，同时仍然包含 img 的比例。

我的 html 看起来像这样:

<div class="container">
    <img src="#">
</div>

我的 CSS 看起来像这样:

.container{
    width: 200px;
    height: 200px;
    overflow: hidden;
}

.container img{
    object-fit: cover;
}

我尝试使用 object-fit: contain。但是，这没有效果......我做错了什么？谢谢!

Answer 1

试试这个

.container img {
max-width: 100%;
max-height: 100%;
}

Demo here