如何在縮放後對圖像進行水平和垂直對中？

Question

我遇到一個棘手的問題。 我需要在縮放圖像後居中水平和垂直圖像。 這裏是我的HTML：

li { 
 
    float: left; 
 
    padding: .78125%; 
 
    width: 31.25%; 
 
    
 
    /*li tag height and width is not fixed for screen adaptation*/ 
 
}

<!-- The code run in mobile browser.So do not think too much fu*king compatibility--> 
 
<ul> 
 
    <li> 
 
    <a href="link"> 
 
     <img class="lazy" src="" data-original=""> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="link"> 
 
     <img class="lazy" src="" data-original=""> 
 
    </a> 
 
    </li> 
 
    <li> 
 
    <a href="link"> 
 
     <img class="lazy" src="" data-original=""> 
 
    </a> 
 
    </li> 
 
</ul>

的問題是，圖像大小不是固定的，他們將縮放後與原來的ratio.And規模，我需要到中心的水平和垂直圖像。

我可以居中水平和垂直圖像而不縮放。但如果需要擴展，我無法處理。

（PS：請原諒我的英語很差，你能聽懂我的問題？）

Answer 1

你可以採取CSS的優勢來爲你做這個。只需將您的背景圖像附加到一個div像這樣：

<div class="resize-me" style=" background-image: url('http://dynamically/generated/url/here'); "></div> 

然後在你的CSS這樣做：

.resize-me { 
    background-size: cover; 
    width: 200px; 
    height: 200px; 
} 

這樣的話，你將網址可以是任何尺寸，和CSS將擴大或者將圖像縮小爲resize-me類的寬度和高度。它也應該每次都適當地調整圖像的中心。

本質上，當您使用cover時，CSS將確定最適合圖像以完全覆蓋div的背景。所以如果你想調整div的大小，你不必做任何手動縮放你的圖像。這與開發人員在標準圖像中使用剪裁遮罩div覆蓋塊級圖像時使用的技巧基本相同。不同之處在於它自動進行居中，只需要創建一個DOM元素。