html - border-box 破坏响应图像的容器

Question

我有一个 <div> ，具有固定的高度和填充。 border-box 属性应用于整个页面。 <div>里面我有一个 <img>与 max-width:100% , 和 max-height:100%特性。我的问题是容器比预期的要宽(我想是因为 padding )。

添加padding的最佳解决方案是什么？在不破坏设计的情况下围绕图像或如何修复它？

我将其保存到 JSFiddle ( http://jsfiddle.net/4eo6bebj/ )，并将其添加到我的问题中。

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

#responsive-image {
    height:150px;
    border:1px solid red;
    display:inline-block;
    float:left;
    padding:15px;
}

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

<div id="responsive-image">
    <img src="http://lorempixel.com/400/200/sports/">
</div>
   

更新:该问题在 Firefox 中可见。

Answer 1

您可以从 div 中删除 padding 并将其添加到内部元素中。

http://jsfiddle.net/6ux1wjLc/

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#responsive-image {
    height:150px;
    border:1px solid red;
    float:left;
}
#responsive-image * {
    padding: 10px;
}
img {
    max-width:100%;
    max-height:100%;
}

<div id="responsive-image">
    <img src="http://lorempixel.com/400/200/sports/" />
</div>