css - Object-fit 不覆盖整个包含区域

Question

图像没有完全覆盖包含区域（您可以看到底部的小青色条。）

这是为什么？我该怎么做才能使图像完全覆盖 div？

div {
  width: 300px;
}

.container {
  width: 100%;
  background-color: teal;
}

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

<div>
  <div class="container">
    <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png">
  </div>
</div>

score 0 · Accepted Answer

添加显示：块；到你的形象。

img{
    max-width: 100%;
    object-fit: cover;
    display: block;
}

作为替代方案，您可以添加 font-size: 0px; 到你的 .container 类。

问题不在于 Object-fit 规则，问题在于 display: inline-block 规则，它向 HTML 添加了不必要的空格。修复它的方法是将元素转换为 display: 块，或者给元素的父元素 font-size: 0px，因此空白“不占用空间”。

你可以在这里阅读更多关于它的信息：

1 回答 1