如何用img标签覆盖div（就像背景图像一样）？

Question

正如这里所讨论的，我试图在div中覆盖一幅图像。仅用这些简单的线条，我就可以通过背景图像来实现这一点：

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

尝试以下操作：

div {
    position:relative;
}
img {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

这假设您已为div提供了大小。

Answer 2

如果您想在不使用CSS背景图像的情况下重新创建backend-size： cover；look，您可以使用以下内容来实现所需的结果。但是，请记住，总是需要一个容器来保存图像。

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，您可能需要使用最大宽度和最大高度。

Answer 3

使用“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>