Html 对象拟合对图像大小没有影响

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

我的html如下所示：

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

我尝试使用objectfit:contain。然而，这没有任何效果。。。我做错了什么？谢谢

试试这个

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

---

将对象适合属性放在容器上，而不是图像本身

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

---

我已经试过了-注意我没有使用背景图像。。。它是一个分区内的img。

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