Question

我创建了一个网格布局的图库，其大小为285x285像素。我需要在图库中填充各种尺寸的图像，包括：285x285,290x285,100x200,500x800等。

我的画廊应该如下工作：

如果图像大于285x285，请获取其中心顶部尺寸为285x285
如果图像小于285x285，则拉伸 SMALLER 维度为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，则 LARGER 尺寸拉伸至285px并保持原始图像比率

这样，有时我会在至少一维的小于285x285的图像周围留下一些空白区域。

如何通过css填充空格？

==== UPDATE ====

我正在使用Bootstrap。

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，请使用＆＃34; background-size＆＃34;属性。使用浏览器前缀，这可能是最好的CSS-Only解决方案。此外，您错过了＆＃34; style＆＃34;的结束报价。属性。

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

Answer 2

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

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

在fixed-size-div中调整图像大小

2 个答案: