大小不統一的圖片居中排列

問題來源：圖片寬高比不一樣，響應式網站圖片又只能限制寬度，沒法限制高度，結果就是排列不齊
應用場景:

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 協議》，轉載必須註明作者和本文連結