边框打破响应图像的容器

Question

我有一个<div>，有固定的高度和填充。 border-box属性应用于整个页面。在<div>内，我有<img> max-width:100%和max-height:100%属性。我的问题是容器比例外更宽（我认为是因为padding）。

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

我将它保存到JSFiddle（http://jsfiddle.net/4eo6bebj/），我也将其添加到我的问题中。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：问题在Firefox中可见。

Answer 1

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

http://jsfiddle.net/6ux1wjLc/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;