【问题标题】: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;
}
<img src="https://i.postimg.cc/rp2vtv6m/Layer-6-1.png" alt="">

【问题讨论】:

    标签: 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>

    【讨论】:

      猜你喜欢
      • 2012-07-21
      • 2013-09-22
      • 1970-01-01
      • 2011-11-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-01-16
      • 2015-10-31
      相关资源
      最近更新 更多