如何使用img标签覆盖div(如背景图像)？

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中使用image标签获得相同的结果.

<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>

注意:IE不支持此功能

PS - 对于那些喜欢downvote(并且正在downvoting)的人,仅仅是因为"它在IE中不起作用"(顺便说一句,它是一个过时的浏览器,所以请教育你的客户至少使用升级浏览器EDGE),有一些对象适合的polyfills将使object-fit工作.

这里有一些例子:

• 对象配合图像
• constancecchen/object-fit-pollyfill
• 用于CSS对象适合属性的Polyfill

Answer 2

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

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。