css3 flex實現扁圖橫向撐滿，豎圖縱向撐滿

<div class="page-video-list">
    <div class="thumbnail">
        <div class="img">
            <img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg">
        </div>
    </div>
    <div class="thumbnail">
        <div class="img">
            <img src="https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg">
        </div>
    </div>
    <div class="thumbnail">
        <div class="img">
            <img src="https://img.alicdn.com/tps/i4/https://img.alicdn.com/imgextra/i3/6000000005261/O1CN01EPZf8u1ojaKW98tV1_!!6000000005261-0-octopus.jpg_240x240q90.jpg">
        </div>
    </div>
</div>

.page-video-list{position:relative;}
.page-video-list .thumbnail{width:100%;padding:5px;}
.page-video-list .img{position:relative;width:100%;height:100%;display:flex;justify-content:left;align-items:center;}
.page-video-list .img img{max-width:100%;max-height:100%;}

效果圖：