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

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

有没有办法通过简单的CSS来解决这个问题？

Answer 1

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

＆＃13;

div {
  border: black solid;
  width: 400px;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

＆＃13;

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

＆＃13;

注意：这是not supported in IE

PS - 对于那些喜欢downvote（并且正在downvoting）的人，只是因为＆＃34;它不能在IE中工作＆＃34; （顺便说一句，它是一个过时的浏览器，所以请教你的客户至少使用升级后的浏览器EDGE），有一些对象适合的polyfill将使object-fit工作。

以下是一些例子：

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。

Answer 3

试试这个：

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

这假设你给了div一个大小。

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

3 个答案: