html - 创建大小相等的响应式 div 容器，不同大小的上传图像填充整个 div。

Question

这听起来可能令人困惑，但基本上我的网站上有一个名为分类广告的部分，我正在设计它，我希望它看起来统一，而不管上传的图像类型如何。

会是这样的

<div class = "classified-container>
    <img class = "classified-img" src = "blablabla.jpg "/>
</div>

我基本上是想让它看起来像 reddit，其中所有框的大小都相同，但图像不一定相同，但它们仍会填满整个 div，并且不会变形/拉伸(stretch)。同时我希望它也能响应并在移动设备上看起来不错。我已经尝试将 img 设置为最大宽度 = 100% 和最大高度 = 100% 但它工作不正常，一些图像没有填满整个 div 容器。

在大多数使用 css 的浏览器中兼容的最佳方法是什么？

Answer 1

 .classified-container{
   background-image:url('blablabla.jpg');
   background-repeat:no-repeat;
   background-size:100% 100%;
}

和您的 HTML :

<div class ="classified-container></div>