我创建了一个网格布局的库,其中的单元格大小为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>

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

最佳答案

对于更新的html,使用“background size”属性。对于浏览器前缀,这可能是最好的CSS唯一的解决方案。另外,您的“style”属性缺少结束引号。
https://css-tricks.com/perfect-full-page-background-image/

10-05 20:57
查看更多