html - div 中的额外填充，在 img 旁边

Question

我在这里搜索了类似的问题，但找不到解决我的问题的方法。

我有一个带有填充的#main-container。在里面我有几个 div，有一个 img。 img 的父级 div 应该具有相同的高度和宽度，但不幸的是它在右侧有多余的空间。删除 #main-container 的填充后，一切正常。我花了几个小时，但没有找到解决方案。

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#main-container {
    padding:30px;
    background:gray;
    height: 350px;
}

#right {
    width:50%;
    background:red;
    margin:0 5%;
    height: 100%;
    float: right;
    text-align: center;
}

#image-container {
    width: auto;
    height: 100%;
    background: black;
    display: inline-block;
}

img {
    max-width:100%;
    max-height:100%;
    display: block;
}

我创建了一个 jsfiddle 示例。红色代表#right div，黑色代表img的父容器。 http://jsfiddle.net/0y1n6rnq/1/

为什么会这样？更新:问题出现在firefox中。

Answer 1

除非图像大小超过 100%，否则设置 max-width 没有任何作用，因此您需要告诉它拉伸(stretch)全长，添加:100% 到 img 类，它将被修复:)

img{
    width: 100%;
}