时间戳

首页 > 解决方案 > 为什么 box-sizing:border-box 对 img 没有影响？

html - 为什么 box-sizing:border-box 对 img 没有影响？

问题描述

我的照片370px*370px默认有。我想要我的边框，填充包含在这些维度中。我尝试使用box-sizing: border-box. 但我不能。为什么？

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

标签： htmlcssimage

解决方案

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

推荐阅读