问img高度/宽度忽略父本div高度/宽度

EN

这是一个HTML/CSS问题，孩子的大小不是由父母的大小来定义的。这是由于默认值的高度和宽度。在CSS中，高度和宽度的默认值是：

img{
    height: auto;
    width: auto;
}

auto让浏览器计算高度，所以这不是最好的方法。

要获得更清晰的代码，请使用height: inherit;和width width: inherit;，它允许子元素从其父元素继承此属性。

如果不设置不同的大小，则图像元素始终具有显示图像的大小。

添加以下css：

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

https://codepen.io/anon/pen/vJmyee

.imgBox img {
    max-width: 100%;
    max-height: 100%;
}

因此，img永远不会比它的父级大。