如何用 img 标签覆盖 div（就像 background-image 一样）？

Question

正如 这里 所讨论的，我试图让一个图像被覆盖在一个 div 中。只需这些简单的线条，我就可以通过 background-image 实现这一目标：

 div{
    width: 172px;
    height: 172px;
    border-style: solid;
    background-image: url('../images/img1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

结果图像在 div 中居中并调整大小以适合 div 的宽度或高度（取决于图像是否宽）。现在我想用 div 中的图像标签实现相同的结果。

 <div>
  <img src="images/img1.jpg"/>
</div>

有没有办法用纯 CSS 解决这个问题？

原文由 PLAYCUBE 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 object-fit:cover 不丢失比率。

 div {
  border: black solid;
  width: 400px;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

 <div>
  <img src="//lorempixel.com/100/100" />
</div>

注意： 这 在 IE 中不受支持

---

PS - 对于那些喜欢投反对票（并且正在投反对票）的人，原因很简单， “它在 IE 中不起作用” （顺便说一句，它是一个过时的浏览器，所以请教育你的客户至少使用升级后的版本浏览器 EDGE），有一些 object-fit 可以使 object-fit 工作。

这里有一些例子：

• 对象拟合图像
• constancecchen /object-fit-pollyfill
• CSS object-fit 属性的 Polyfill

或者，如果您认为仅针对该属性使用 polyfill 有点矫枉过正，这里有一个简单的代码片段，可以使它在 IE 中正常工作。

您可以使用一个简单的 JS 片段来检测是否支持 object-fit ，然后将 img 替换为 svg

 //for browsers which doesn't support object-fit (you can use babel to transpile to ES5)

if ('objectFit' in document.documentElement.style === false) {
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('img[data-object-fit]').forEach(image => {
            (image.runtimeStyle || image.style).background = `url("${image.src}") no-repeat 50%/${image.currentStyle ? image.currentStyle['object-fit'] : image.getAttribute('data-object-fit')}`
            image.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${image.width}' height='${image.height}'%3E%3C/svg%3E`
        })
    })
}

 img {
  display: inline-flex;
  width: 175px;
  height: 175px;
  margin-right: 10px;
  border: 1px solid red
}

/*for browsers which support object fit */

[data-object-fit='cover'] {
  object-fit: cover
}

[data-object-fit='contain'] {
  object-fit: contain
}

 <img data-object-fit='cover' src='//picsum.photos/1200/600' />
<img data-object-fit='contain' src='//picsum.photos/1200/600' />
<img src='//picsum.photos/1200/600' />

原文由 dippas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您想在不使用 CSS 背景图像的情况下重新创建 background-size: cover; 外观，您可以使用以下方法来获得所需的结果。但是请记住，始终需要有一个容器来保存图像。

 div {
    position: relative;
    overflow: hidden;
}
img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}

根据您的额外 CSS，您可能想要使用 max-width 和 max-height 。

原文由 jjcarlson 发布，翻译遵循 CC BY-SA 4.0 许可协议