Html 在固定大小的div中调整图像大小

我创建了一个具有网格布局的图库，其单元格大小为285x285像素。 我需要用不同尺寸的图像填充图库，包括：285x285、290x285、100x200、500x800等等

我的图库的工作原理如下：

• 如果图像大于285x285，则获取图像的中心顶部 尺寸为285x285
• 如果图像小于285x285，则拉伸图像 将尺寸缩小到285px，并以285x285的尺寸获取其中心顶部，但保持原始图像比率

这样，我希望在网格中填充整个单元格空间，除了单元格之间的一些空白（5px右侧和5px底部）

我尝试了以下css：

.imagegallery {
    padding: 2px !important;
    background-position:50% 10%;
    background-repeat: no-repeat;
    min-height:285px;
    min-width:285px;
    max-height:285px;
    max-width:285px;
    margin-right:5px;
    margin-bottom:5px;
}

然而，结果如下：

• 如果图像大于285x285，我将正确获取所需图像的部分（中间-顶部）
• 如果图像小于285x285，则较大的尺寸将拉伸到285px，并保持原始图像比率

这样，有时我会在图像周围获得一些空白，这些空白至少在一个维度上小于285x285

如何通过css填充空白

==更新====

我正在使用引导

HTML示例：

<div class="row">
    <div class="col-md-3 col-sm-2 col-xs-1 portfolio-item img-list imagegallery" 
         style="background-image:url('./images/img.jpg');>
    </div>
    </div>
</div>

您可以使用CSS
object-fit:cover
property。这将按比例覆盖图像区域，而不会拉伸较小的尺寸

参考：
对于更新的html，请使用“背景大小”属性。有了浏览器前缀，这可能是最好的纯CSS解决方案。此外，您缺少“样式”属性的结束引号

请显示单个实例的HTML及其最近的父实例…OP已更新，以包括exampleobject fit尚未得到广泛支持。。。值得注意的是不是IE。我试图将其添加到imagegallery，但似乎不起作用。我更新了我的OP以包含一些HTML。我需要从我已经放置的css属性中删除任何其他css属性吗？通过这种方式，我似乎使图像变形了，我不想这样。我指定了285px 285px作为背景大小值OK，如果我指定cover作为值，它似乎不会使图像变形。谢谢。我通常会用“封面”。在不改变纵横比的情况下拉伸图像以适应空间（扭曲）。它通过“缩放”到图像中心并隐藏溢出来实现这一点。