img 的宽度和高度属性是否应该考虑边框和填充？答案

【问题标题】：Should width and height attributes of an img account for border and padding?img 的宽度和高度属性是否应该考虑边框和填充？
【发布时间】：2018-03-21 04:21:12
【问题描述】：

根据 w3schools：

重要提示：当您使用 CSS 设置元素的宽度和高度属性时，您只需设置内容区域的宽度和高度。要计算元素的完整大小，您还必须添加内边距、边框和边距。

我在实践中使用<img...> 标记发现的是，无论我是通过CSS 指定宽度和高度，还是使用<img...> 标记的width 和height 属性，都是这不仅仅是我的内容的大小受到影响。整个图像内容、内边距和边框的大小都与我指定的宽度和高度相匹配。

在这上面加上一些具体的数字：

我的旗帜图标尺寸为 32 像素 * 22 像素。我想将它们缩小 50% 到 16px * 11px。
我想在标志图标周围放置 1 px 的内边距，然后是 1 像素的实心浅灰色边框。
结果的总屏幕尺寸包括内边距和边框应为 20px * 15px。

正常工作的 CSS 是这样的：

.flag-image {
  width: 20px;
  height: 15px;
  position: relative;
  top: 3px;
  padding: 1px;
  border: lightgray 1px solid;
}

但是，如果这是真的，我应该只指定内容大小，那么宽度和高度不应该是 16px 和 11px 吗？为什么，如果我使用 16px 和 11px，我的标志图标是否被压得太小？我拍了一张屏幕截图，放大了它，并计算了像素。 20px 和 15px 给了我正确的结果。

img 标签有什么特别之处吗？我是否遗漏或误解了 HTML 或 CSS 规范？

【问题讨论】：

标签： html css image

【解决方案1】：

您的假设是正确的——img 元素在计算尺寸时应与任何其他元素相同，并考虑边框和填充。您所观察到的最可能的解释是，您的样式表或第三方库或框架的样式表在某处有一个 box-sizing: border-box 规则影响您的 img 元素。

如果删除该规则不是一个选项（例如，因为它是 a universal rule），您可以通过将 box-sizing 重置为 content-box 来覆盖它，这样您就可以设置最有意义的尺寸：

.flag-image {
  width: 16px;
  height: 11px;
  position: relative;
  top: 3px;
  padding: 1px;
  border: lightgray 1px solid;
  box-sizing: content-box;
}

或者您可以选择使用它并保持宽度和高度声明不变，缺点是数字似乎违反直觉。

【讨论】：

在检查元素时，我确实看到指定了box-sizing: border-box，尽管我自己没有指定它。它似乎已被设置为一个通用规则，我能想到的最有可能的罪魁祸首是我正在使用的 PrimeNG 小部件。
@kshetline：是的。我的意思是说“您的样式表或第三方库或框架的样式表”，因为如果您自己指定，您可能会记住这一点。

【解决方案2】：

如果您想要您提到的确切的width 和height，您需要在图像中使用box-sizing: border-box...请参阅下面的示例

如果你使用width 和height 属性到img 而不是来自css，那么如果box-sizing 未设置为border-box，则图像的总宽度将为width + padding + border p>

console.log("img1 dimension: " + $(".img1").outerWidth() + "x" + $(".img1").outerHeight())
console.log("img2 dimension: " + $(".img2").outerWidth() + "x" + $(".img2").outerHeight())
console.log("img3 dimension: " + $(".img3").outerWidth() + "x" + $(".img3").outerHeight())

.img1,
.img2 {
  width: 30px;
  height: 25px;
  position: relative;
  padding: 1px;
  border: lightgray 1px solid;
}

.img3 {
  position: relative;
  padding: 1px;
  border: lightgray 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="http://via.placeholder.com/50x50">
<img class="img2" src="http://via.placeholder.com/50x50" style="box-sizing:border-box;">
<img class="img3" width="30px" height="25px" src="http://via.placeholder.com/50x50">

【讨论】：