Html 为什么我的DIV在图像下方延伸，即使它们的高度相同？

我正在尝试以响应的方式格式化DIV和其中的图像

这是我的CSS：

#masthead { width:100% ;
    height:auto ;
    max-height:350px ;
    background:navy ;
    text-align:center ;
    overflow:hidden ;
}

#masthead img { width:100% ;
    max-width:300px ;
    height:auto ;
    margin:0 auto ;
}

和我的HTML：

<div id="masthead">
    <img src="http://i.imgur.com/K9aZKGI.png" />
</div>

图像宽300px，高350px，与DIV的高度相同。那么为什么DIV在图像下方延伸3或4 px

以下是JSFIDLE：

它快把我逼疯了。感谢您的帮助：）

最好的

---

Cynthia

应给予img

垂直对齐：底部

或

顶部

，否则它下面会有一个空格

，如果为true，它不会回答以下问题：

那么为什么DIV会在图像下方延伸3或4像素？

为什么？为什么你要问一个被问了无数次的问题，而不是使用搜索？这是一个更有趣的问题，我没有问这个问题-我从来没有问过，所以。这是另一个人对不起，我以为你是OP。通过删除宽度和最大宽度属性，设置高度：100%；我相信在img上你会完成你想要的。看见