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：contains。但是，这没有影响......我做错了什么？谢谢！

Answer 1

试试这个

plsql

Demo here

Answer 2

将object-fit属性放在容器上，而不是图像本身。

.container{
    width: 200px;
    height: 200px;
    /* overflow: hidden; no longer necessary */
    object-fit: cover;
}