div 中的额外填充，位于 img 旁边

Question

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

我有一个#main-container 和padding。在里面我有几个 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 没有任何作用，因此您需要告诉它拉伸整个长度，在 img 类中添加：100%，它将被修复:)

img{
    width: 100%;
}

Answer 2

检查此代码。如果我们同时使用最大高度和宽度，图像会拉伸脂肪。所以如果我们设置 width: 100% 那么就可以使用 height:auto

*, *: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;
    overflow: hidden;
}

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

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

<div id="main-container">
    <div id="right">
        <div id="image-container">
            <img src="http://lorempixel.com/450/600/">
        </div>
    </div>
</div>