我的图像不适合其容器的整个高度

Question

我的 div 元素内有一个图像，我希望我的图像适合其容器的整个高度，但这不会发生。我的图像是正方形的。我不得不提的是，我并不关心长宽比。 这是我的代码

我尝试了对象适合属性，但没有帮助。

.container {
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  background-color: red;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<div class='container'>
  <img src="https://cdn140.picsart.com/39063465592866053138.webp?type=webp" alt="">
</div>

Answer 1

设置容器的

height

属性以获得您想要的结果。这将使图像了解

100% height

的含义。

.container {
  border-radius: 10px;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: red;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

<div class='container'>
  <img src="https://cdn140.picsart.com/39063465592866053138.webp?type=webp" alt="">
</div>