html - 如何用 img 标签覆盖 div(就像 background-image 一样)？

Question

讨论 here我试图让一个图像覆盖在一个 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 解决这个问题？

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>

注意:这是 not supported in IE

---

P.S. - 对于那些喜欢投反对票(并且正在投反对票)的人，原因很简单，“它在 IE 中不起作用”(顺便说一下，它是一个过时的浏览器，所以请教育您的客户至少使用升级后的浏览器 EDGE)，那里有一些 object-fit polyfill 可以使 object-fit 工作。

这里有几个例子:

• object-fit-images
• constancecchen /object-fit-pollyfill
• Polyfill for CSS object-fit property

或者，如果您认为仅针对该属性使用 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' />