弹性盒子布局解决不规则图片的等比例缩放的利器！

Posted 2020-09-24

我们经常遇到这种需求：

在一个固定大小（固定比例）的容器里面展示图片，图片的大小比例都不是固定的，需要按容器的比例等比例缩图片上下左右居中显示。

 

 

在没有弹性盒子布局的年代，额的做法：

1：水平居中，非常好解决，容器 text-align: center; 

2：垂直居中，容器display: table-cell; 图片vertical-align: middle;

3：等比例缩放，js解决，思路：

（1）如果图片宽高都没有超过容器大小，则忽略 

（2）如果图片的宽度或者高度其中有一方超过容器大小，则固定没超过的，缩放超过的

（3）如果图片宽度和高度都超过容器大小，则先缩放宽度到容器宽度，如果等比例缩放的高度没超过容器的高度则完美，如果超过则缩放高度到容器高度，再计算宽度。。。

炒鸡麻烦有木有！

而现在有了弹性盒子布局，零JS代码纯CSS实现以上效果，在弹性盒子布局里面，容器会自动判断子是否超过了大小，如果超过会自动按照以上规则进行缩放，什么水平居中垂直居中也是小case，简直爽到爆！

.container {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        background: #000;
        img {
            width: 100%;
        }
    }