如何使用边距处理响应/流畅的图像？

Question

在尝试应用响应式图像技术时，我遇到了一点打嗝。我正在使用“max-width：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，允许用户在图像周围指定填充。

Answer 1

问题是它将宽度设置为100％然后添加填充。要使宽度包括填充，请使用以下CSS属性将框大小设置为border-box：

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