如何处理带有边距的响应式/流体图像？答案

【问题标题】：How to handle responsive/fluid images with margins?如何处理带有边距的响应式/流体图像？
【发布时间】：2014-01-15 20:00:10
【问题描述】：

我在尝试应用响应式图像技术时遇到了一点问题。我正在使用“最大宽度：100%；”确保图像宽度受容器大小限制的技巧。

但是，在图像指定了内联填充的情况下，我遇到了麻烦。似乎 X 的填充允许图像比其容器宽 X。

下面带有内联样式的简单示例（为简单起见）- 包含的 div 有一个边框，因此您可以看到，当窗口调整到足够小的大小时，包含的图像会破坏 div 的宽度：

<div style="width: 50%; border: 1px solid black;">
    <img src="someimage.png" style="max-width: 100%; padding: 2%;"/>
</div>

有人可以澄清发生了什么并可能提供解决方案吗？不幸的是，我正在使用一个允许用户在图像周围指定填充的 CMS。

【问题讨论】：

【解决方案1】：

问题在于它将宽度设置为 100%，然后添加填充。要使宽度包含内边距，请使用以下 CSS 属性将框大小设置为边框框：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

【讨论】：