图像大于父 div

Question

我有一些非常简单的htmldiv，里面有一个图像。奇怪的是，图像超出了div的底部，我不明白为什么。

<div>
    <img src="picture.jpg">
</div>

当我检查元素属性时，div 的高度为 195px，图像的高度为 200px。

这让我卡住了。可能导致此问题的原因是什么，我该如何解决？

编辑1

浏览我发现的属性：

img {
  margin-bottom: -5px
}

这是由 w3.css 设置的：

.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit}

我不确定为什么要应用它，因为我没有为此图像或包含的div 设置类。

我现在已经解决了这个问题：

img {
  margin-bottom: 0px !important;
}

编辑2

好的，找到了。CLAS正在其他地方应用。现在删除了它，一切都很好。

Answer 1

您可以为图像提供一个ID并将其添加到宽度为100%的css文件中

 <div src="img.jpg" id="id_example"></div>

***///.CSS

  #id_example {
     width: 100%;
      }

或者您可以尝试以像素为单位

Answer 2

这很容易。

对于此 HTML 代码：

<div>
    <img src="picture.jpg">
</div>

添加此 CSS 代码：

div img {
    display: block;
    width: auto;
    height: 100%;
}