彈性盒子布局解決不規則圖片的等比例縮放的利器！

我們經常遇到這種需求：

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

 

 

在沒有彈性盒子布局的年代，額的做法：

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%;
        }
    }