如果该容器没有任何明确的宽度或高度，我可以使用 CSS 将图像适合其容器吗？

Question

我无法将图像放入具有隐式宽度和高度的容器

我试图适合它的容器使用CSS图像，但问题是，容器没有任何明确的宽度或高度。

我尝试使用object-fit CSS属性，但没有解决问题

Answer 1

所以默认情况下你不能在div内填充图像，因为div没有固定的宽度或高度。这意味着div将自动获取图像的宽度&高度。

如果你可以设置高度，我会这样做:

HTML:

<div class="container">
<img src="https://www.gravatar.com/avatar/21309d2e0e611c5d347f2c0beb54b168?s=64&d=identicon&r=PG&f=1" class="image"/>
</div>

CSS:

.container{
border: 1px solid black;
height: 512px;
}
.image{
width: 100%;
height: 100%;
object-fit: cover;
}

https://jsfiddle.net/equ6g7y4/24/