<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;}
效果图: