Why box-sizing:border-box has no effect on img?

Question

My photo has 370px*370px by default. And I want my border, padding were included in these dimensions. I try to achieve this effect with box-sizing: border-box. But I can't. Why?

* {
  margin: 0;
  padding: 0;
}



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

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

score 0 · Answer 1 · answered Dec 26 '20 at 13:04

* {
  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>

Why box-sizing:border-box has no effect on img?

1 Answers1