在img旁边的div中有额外的填充

Question

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

我有#main-container padding。在里面，我有几个div，img。 div的父img应该具有相同的高度和宽度，但不幸的是它在右侧有额外的空间。删除#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不会做任何事情，因此您需要告诉它延长全长，添加：100％到img类并且它将被修复:)

img{
    width: 100%;
}

Answer 2

检查此代码。如果我们一起使用max-height和width，图像会拉伸脂肪。因此，如果我们使宽度：100％，那么使用高度：auto

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;