html - 自动调整图像横幅以适应 div 容器

Question

我有一个横幅，我想将其添加到我的简单网站中，这是我目前拥有的内容

HTML

<div class="col-lg-12 main-banner">
          <a href="https://www.google.com">
            <img src="images/Test_09-17.png"></a>
      </div>

CSS

img{
    width: 100%;
    object-fit:contain;
}

我希望图像适合 div，不幸的是现在我的左右两侧空间很小。

Check the image:

问题

What is wrong with my code?

Answer 1

看起来您的图像上有填充。 (基于图像左右两侧的绿色。)。您是否检查了浏览器中图像元素的计算填充？

虽然无法看到页面的 HTML 和 CSS，但我无法确定。

解决方案:有来自浏览器或其他代码的默认填充。将填充设置为 0 解决了这个问题。