为什么 box-sizing:border-box 对 img 没有影响？ [复制]

【问题标题】：Why box-sizing:border-box has no effect on img? [duplicate]为什么 box-sizing:border-box 对 img 没有影响？ [复制]
【发布时间】：2020-12-26 21:04:45
【问题描述】：

我的照片默认有370px*370px。我希望我的边框，填充包含在这些尺寸中。我尝试用box-sizing: border-box 来达到这个效果。但我不能。为什么？

* {
  margin: 0;
  padding: 0;
}



img {
  box-sizing: border-box;
  border: 3px solid #000;
  padding: 10px;
}

&lt;img src="https://i.postimg.cc/rp2vtv6m/Layer-6-1.png" alt=""&gt;

【问题讨论】：

标签： html css image

【解决方案1】：

* {
  margin: 0;
  padding: 0;
}



img#origin {
  box-sizing: border-box;
  border: 3px solid #000;
  padding: 10px;
}

.img-wrapper{
  box-sizing: border-box;
  border: 3px solid #000;
  padding: 10px;
  width: 370px;
  height: 370px;
}

.img-wrapper > img{
  width: 100%;
}

<h2>Yours</h2>
<img id="origin" src="https://i.postimg.cc/rp2vtv6m/Layer-6-1.png" alt="">


<h2> If you want to make a box 370x370, wrap the img using div</h2>
<div class="img-wrapper">
  <img src="https://i.postimg.cc/rp2vtv6m/Layer-6-1.png" alt="">
</div>

【讨论】：