添加图片边框后如何在DIV中居中图片且不超出容器？

我已经将DIV居中于网页，同时也让DIV内的图片和文本实现了居中。但给图片添加5px白色边框后，图片右侧会超出DIV范围——无框状态下图片能正常居中。

想请教两个问题：

1. 有没有办法给图片添加四边5px边框的同时，让它在DIV内居中且不超出容器？
2. 我曾尝试通过手动计算DIV尺寸来调整图片宽度，实现加框后的居中，但在中大型项目里必须通过这种手动计算像素的方式完成这类操作吗？有没有更高效的方案？

1. 使用box-sizing: border-box（首推方案） #

这是前端开发中解决盒模型尺寸溢出问题的标准方案，它会让元素的边框、内边距都被包含在自身设置的宽高范围内，不会额外撑开元素。

直接给图片添加这个样式即可：

img {
  box-sizing: border-box;
  border: 5px solid white;
}

如果要让项目中所有元素都遵循这个规则，还可以在全局样式里设置：

* {
  box-sizing: border-box;
}

中大型项目里几乎都会用这个配置，完全不用手动计算尺寸，省心又高效。

2. 用容器内边距替代图片边框 #

如果不想修改盒模型规则，也可以给包裹图片的DIV添加内边距，同时将图片宽度设为100%：

/* 假设你的DIV类名为container */
.container {
  padding: 5px; /* 数值和想要的边框宽度一致 */
}
.container img {
  width: 100%;
}

这种方式也能让图片刚好填满容器的内边距区域，不会超出DIV范围。

3. 用calc()计算图片宽度（局部场景适用） #

如果只是个别图片需要调整，可以用calc()直接减去边框的总宽度（左右各5px，合计10px）：

img {
  width: calc(100% - 10px);
  border: 5px solid white;
}

不过这种方法灵活性不如box-sizing，只适合特殊场景下的局部调整。

内容的提问来源于stack exchange，提问作者Kimo