图片大于父div

Question

我有一些非常简单的html div，里面有一个图像。奇怪的是，图像超出了div的底部，我无法理解为什么。

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

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

这让我卡住了。可能导致这种情况的原因以及如何解决？

EDIT1

浏览我发现的属性：

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;
}

EDIT2

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

Answer 1

你可以给图像一个ID并将其添加到css文件中，其宽度为100％

 <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%;
}