图片居中等比缩放且填充div

图片居中等比放大且填充满

因为经常会有这种需求，需要等比将图片缩放并填充满整个div的需求，但是前端本身图片并没有这种属性设置，所以要进行特别处理

这种图片的展示方式再ios中叫Aspect fit，在安卓中叫 crop center 都是可以直接设置的，而再css里只能用特殊处理

---

一般情况我们展示图片的时候，如果需要将图片设置一定比例的展示，可能会用div包裹，然后将图片设置最大宽度和最大高度，这样会导致图片无法占满整个div，这样会很难看。

//html
<div class="box1">
    <img  class="avator1" src="./avator.png" alt="">
</div>

//css
.box1 {
    width: 75px;
    height: 100px;
    border: 2px solid #000;
    overflow: hidden;
}
.avator1 {
    max-width: 100%;
    max-height: 100%;
}

结果是这样的：

---

当然也有可能选择拉伸，但是图片会变形也很难看

//html
  <div class="box2">
     <img  class="avator2" src="./avator.png" alt="">
  </div>
//css
  .box2 {
        width: 75px;
        height: 100px;
        border: 2px solid #000;
        overflow: hidden;
    }
    .avator2 {
       width: 100%;
       height: 100%;
    }

结果如下：

---

下面是实现等比缩放，且填满整个div的方法，对多余部分进行裁剪，其实用到的就是div的background-size:cover;

//html
<div class="avator3" style="background-image:url(./avator.png)"></div>

//css
   .avator3 {
        width: 75px;
        height: 100px;
        overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        background-size:cover;
        border: 2px solid #000;
    }
    
  //当然因为我们只是想图片以一定宽高比展示，确定了宽度的情况下，我们并不想计算高度是多少，希望直接写比例就行，这种情况可以这样写
  //html
  <div class="box3">
        <div class="avator3" style="background-image:url(./avator.png)"</div>
  </div>
  //css
  .box3 {
        width: 75px;
    }
    .avator3 {
        width: 75px;
        height: 0px;
        padding-bottom: 133%;
        overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        background-size:cover;
        border: 2px solid #000;
    }
  //这里利用的就是padding的百分比是按照父元素的width确定的，从而实现高度直接用百分比控制

结果如下：