大小为固定大小的图像大小

Question

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

我的画廊工作如下：

• 如果图像大于285x285，则获取大小为285x285的中顶部部分。
• 如果图像小于285 x 285，则将较小的维数拉伸到285 is，并得到尺寸为285 x 285的中心-顶部部分，但保持原始图像比。

这样，我想在网格中填充整个单元格空间，除了单元格之间的一些空白(5 5px右边和5 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，我正确地得到了我想要的部分(中顶部)。
• 如果图像小于285 x 285，则将较大的维数拉伸到285 to，并保持原始图像比。

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

如何通过css填充空白？

====UPDATE====

我用的是靴带。

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>

background-image:url是样式的，而不是类的，因为图像名是通过AngularJS构建的。

Answer 1

对于更新的html，使用“背景大小”属性。使用浏览器前缀，这可能是最好的CSS解决方案。此外，您还遗漏了“样式”属性的结尾引号。

https://css-tricks.com/perfect-full-page-background-image/

Answer 2

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

参考资料：https://css-tricks.com/almanac/properties/o/object-fit/