如何在缩放后对图像进行水平和垂直对中？

我遇到一个棘手的问题。我需要在缩放图像后居中水平和垂直图像。这里是我的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：请原谅我的英语很差，你能听懂我的问题？）

来源

2015-08-03 m_cat

你可以采取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元素。

来源

2015-08-03 13:16:51

实际上，我考虑过这种方法，但是我出于某种原因不能使用它。一个原因是，图片封面可能并不完美。以下是我的网页效果[链接]（http：//i3.tietuku的.com/1cab2ae312f83188.png） –

如何在缩放后对图像进行水平和垂直对中？

回答

相关问题