img的width和height属性应该考虑边框和填充吗？

Question

根据w3schools：

  

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

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

在此上加上一些具体数字：

• 我的旗帜图标尺寸为32px * 22px。我想将它们缩小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规范？

Answer 1

您的假设是正确的 - 默认情况下，img元素在计算考虑边框和填充的大小时应与其他任何元素相同。对您所观察到的内容最可能的解释是，您的样式表或第三方库或框架的样式表在某处影响box-sizing: border-box元素的img规则。< / p>

如果删除该规则不是一个选项（例如，因为它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;
}

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

Answer 2

如果您想要提到的确切box-sizing: border-box和width，则需要对图片使用height ...请参阅以下示例

如果您使用width和height属性到img而不是css，那么如果{{1}，则图片的总宽度将为width + padding + border }未设置为box-sizing

border-box

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;
}