对象拟合不覆盖整个包含区域[重复]

【问题标题】：Object-fit does not cover the entire containing area [duplicate]对象拟合不覆盖整个包含区域[重复]
【发布时间】：2020-02-22 10:54:32
【问题描述】：

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

这是为什么呢？我该怎么做才能使图像完全覆盖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>

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：