对象适合不覆盖整个包含区域

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>

Answer 1

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

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

作为备选方案，您可以添加 font-size: 0px;到你的 .container class.

问题不在于 Object-fit 规则，问题在于 display: inline-block 规则，它向 HTML 添加了不必要的空格。修复它的方法是将元素转换为显示：块，或者给元素的父元素字体大小：0px，所以空格 'takes no space'。

您可以在这里阅读更多相关信息：

Object-fit does not cover the entire containing area