自动调整图像横幅的大小以适合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，很不幸，现在我的左右两侧空间很小。

  

检查图像：   

问题

  

我的代码有什么问题？

Answer 1

图像上似乎有填充。 （基于图像左右两侧的绿色。）。您是否在浏览器中检查了图像元素上计算出的填充？

我无法确定页面的HTML和CSS。

解决方案： 浏览器或其他代码中都有默认的填充。将padding设置为0可解决此问题。