zoukankan      html  css  js  c++  java
  • 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;}

    效果图:

  • 相关阅读:
    Redis集群(一)
    Mysql分库分表
    Redisson分布式锁
    Spring Cloud Eureka 高可用
    Spring RestTemplate具备负载均衡功能
    Redis分布式锁
    B树/B-树/B+树/B*树的数据库应用
    ABAC访问控制模型
    Maven自定义打包的包名
    Versions maven plugin 修改版本
  • 原文地址:https://www.cnblogs.com/gongshunkai/p/13813444.html
Copyright © 2011-2022 走看看