用image元素填充父div

Question

我想用div填充父img，但不是将图片设置为div的背景属性，而是希望它是个人{{1}在img。

中的元素

换句话说，我想这样做：

div

..但是有一个img元素，就像这样：

div {
    background-image: url('someimg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

我设法在<div> <!-- Image element should cover the container on dekstops and small screens as well --> <img src="someimg.jpg"> </div> ：

上做了类似的事情

img

..但是在调整大小时，它不会填充父级。这是一个小提琴：https://jsfiddle.net/dy5ub0f5/5/

Answer 1

img可能正在填充父级，但父级可能不是您期望的大小。

将img样式从max-height：100％更改为height：100％

调整父div的大小。

Answer 2

因为，你在CSS中给出 max-height：100％; ，如果你的图像分辨率小于div（400Px），那么它将保持其原始高度（375px）。 这就是为什么图像在调整大小时没有填充父div。

＆＃13;

＆＃13;

div {
  height: 400px;
  width: 100%;
  background-color:#ececec;
}

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

＆＃13;

<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

以上代码将使图像填写其父DIV。但由于图像分辨率小于div，因此图像会模糊。

为了避免你可以使用max-width和max-height，这样如果图像的分辨率低于div，它将坚持自己的大小，否则它将填充父div，如下所示：

＆＃13;

＆＃13;

div {
  height: 400px;
  width: 100%;
  background-color:#ececec;
}

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

＆＃13;

<div class="image">
<img src="https://png.pngtree.com/thumb_back/fw800/back_pic/00/06/31/695628f664c006c.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;