css3 flex实现图片大于div时自动裁剪保持水平垂直居中不变形

<div class="page-product-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-product-list{position:relative;}
.page-product-list:after{content:"";clear:both;display:block;}
.page-product-list .thumbnail{width:33.3333%;padding:5px;float:left;}
.page-product-list .img{overflow:hidden;position:relative;width:100%;height:0;padding-bottom:100%;display:flex;justify-content:center;align-items:center;}
.page-product-list .img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}

效果图：