在固定大小的 div 内显示未知大小的图像答案

【问题标题】：displaying image of unknown size inside div of fixed size在固定大小的 div 内显示未知大小的图像
【发布时间】：2014-02-11 11:03:16
【问题描述】：

我有一个固定大小的<div>，比如height:100px 和width:100px。我必须在这个<div> 中显示大小未知的图像，这样会出现以下情况：

图像宽度 > div 宽度
图片宽度
图像宽度 = div 宽度
图片高度> div高度
图片高度
图像高度 = div 高度

无论如何，最好的跨浏览器策略是什么，支持旧版浏览器，以以下标准显示它们：

图片周围没有空白
如果溢出则很好地居中（水平和垂直）

【问题讨论】：

对我来说，在这些情况下最好的方法是使用background-images 和居中对齐。否则，您需要一些 js 来确定图像是用于纵向还是横向，并使用 width:100% 和 height:auto 或相反（height:100% 和 width:auto）。
CSS 魔法等着你……
Background-size:cover 在寻找旧版浏览器支持时效果不佳。我会推荐一个 js 解决方案，比如 Isotope 或 Masonry。

【解决方案1】：

最好的方法是使用 object-fit 属性。

.image-container {
    width: 400px;
    height: 300px;
}

.centered-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="image-container">
  <img src="https://24seven.co.ke/uploads/sliders/1550944223ecommmerce.jpg" alt="24seven Developers slider" class="centered-image">
</div>

更多插图和极客见this。

【讨论】：

【解决方案2】：

要消除空白，请将图像的min-height 和min-width 设置为100%。要剪辑溢出，请在 div 上设置 overflow: hidden。要将溢出的图像居中，请使用绝对定位和一些 JavaScript 根据图像大小设置 top 和 left 值。

编辑：如果图像在两个维度上都大于容器，请使用一些 JavaScript 删除minHeight 和minWidth，然后将height 设置为100%。如果在宽度上留下空白，请将height 设置为"" 并将width 设置为100%：

.centeredImageContainer {
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
.centeredImage {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}

function centerImage(img) {
    var container = img.parentNode;
    if (img.offsetHeight > container.clientHeight &&
        img.offsetWidth > container.clientWidth) {
        img.style.minHeight = "0";
        img.style.minWidth = "0";
        img.style.height = "100%";
        if (img.offsetWidth < container.clientWidth) {
            img.style.height = "";
            img.style.width = "100%";
        }
    }
    img.style.top = ((container.offsetHeight - img.offsetHeight) / 2) + "px";
    img.style.left = ((container.offsetWidth - img.offsetWidth) / 2) + "px";
}

jsfiddle.net/QRU4w/2

【讨论】：

一些数学家可能会给你一个公式来确定你是否需要为超大图像设置高度或宽度，这样的公式甚至可能比我的愚蠢算法更优雅。但是，我怀疑这会对性能或可读性产生很大影响。显然，如果容器保证是方形的，公式会很简单，但我觉得它可能并不总是方形的。
感谢您抽出宝贵的时间

【解决方案3】：

如果你的意思是你需要在横向图像上方没有空格包括，例如（即照片需要填满正方形，无论它最初是否是正方形），那么您可能需要考虑将图像设置为 div 的背景并使用background-size: cover。浏览器支持见this link。

【讨论】：

背景尺寸：封面不是跨浏览器的旧版支持

【解决方案4】：

编辑：

fiddle

html:
<div id="myPic"></div>

css，如果你想让一张大图缩小以适应整个 div，并希望一张小图扩大以填充整个 div：

#myPic{ 
  width: 100px;
  height: 100px;
  background-image: url(/abs/path/img.jpg);
  background-size: cover;
}

css，如果你想让一张大图只显示中间的一个窗口而不调整大小：

#myPic{ 
  width: 100px;
  height: 100px;
  background-image: url(/abs/path/img.jpg);
  background-position: center center;
}

我不知道有一种方法既可以扩大小图像以适应大小，又不缩小大图像。

【讨论】：