大小不统一的图片居中排列

问题来源:图片宽高比不一样,响应式网站图片又只能限制宽度,没法限制高度,结果就是排列不齐
应用场景:

  1. 图片宽高比不一样,多行图片又不能错行
  2. 内容高度不确定又要居中显示也是这个原理
<ul class="prolist c">
    <li class="col-md-3 col-xs-6">
        <a href="">
            <img src="/uploads/product/20210118175611418.jpg" alt="防火窗">
        </a>
    </li>
</ul>

解决办法:
css

.prolist li>a {
    display: block;
    position: relative;
    height: 0;
    padding: 0 0 75%;/*(根据宽度计算高度)*/
    box-shadow: 1px 1px 5px 2px #ccc;
}
.prolist img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /*下面是上下左右居中居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

html

<ul class="prolist c">
    <li class="col-md-3 col-xs-6">
        <a href="">
            <img src="/uploads/product/20210118175611418.jpg" alt="防火窗">
        </a>
    </li>
</ul>
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!