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

【问题标题】：Sizing images in fixed-size-div在固定大小的 div 中调整图像大小
【发布时间】：2015-07-25 22:24:41
【问题描述】：

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

我的画廊应该如下工作：

如果图像大于 285x285，则获取它的中心顶部尺寸为 285x285
如果图像小于 285x285，则拉伸 SMALLER 尺寸为 285 像素，并以 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 填充空白？

====更新====

我正在使用 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 构建的。

【问题讨论】：

请显示单个实例的 HTML 及其最近的父实例...
OP 已更新以包含示例

标签： html css image

【解决方案1】：

对于更新后的 html，请使用“background-size”属性。使用浏览器前缀，这可能是最好的纯 CSS 解决方案。此外，您缺少“样式”属性的结束引号。

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

【讨论】：

我是否需要从我已经放置的那些中删除任何其他 css 属性？这样，我似乎得到了我不想变形的图像。
我指定了 285px 285px 作为背景尺寸值
好的，如果我将封面指定为值，它似乎不会使图像变形。谢谢。
我通常会使用“封面”。在不改变纵横比（扭曲）的情况下拉伸图像以适应空间。它通过“放大”到图像的中心并隐藏溢出来做到这一点。

【解决方案2】：

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

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

【讨论】：

object-fit 尚未得到广泛支持……尤其是 IE 不支持。
我试图将它添加到图片库，但这似乎不起作用。我更新了我的 OP 以包含一些 HTML。