How to horizontal and vertical centering images after scaling them? - html

Question

I meet a tricky problem.
I need to center horizontal and vertical images after scaling images.
Here is my 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>
The problem is, images size is not fixed and them will scale with their original ratio.And after scaling, I need to center horizontal and vertical images.
I can center horizontal and vertical images without scaling. But I can't handle it if it need to scale.
(ps: Forgive my poor English. Can you understand my problem?)

Answer 1

You could take advantage of CSS to do this for you. Simply attach your background-image to a div like so:
<div class="resize-me" style=" background-image: url('http://dynamically/generated/url/here'); "></div>
Then in your css do this:
.resize-me {
background-size: cover;
width: 200px;
height: 200px;
}
That way, the url you attach can be any size, and CSS will scale up or down the image to be the width and height of the resize-me class. It should also center the image properly every time.
Essentially, when you use cover, CSS will determine the best fit for the image to completely cover the background of the div. So if you want to resize the div, you wont have to do any manual scaling of your images. This is essentially the same trick that developers used to use with standard images where you would use a clipping mask div over a block-level image. The difference is that it does the centering automatically, and you only need to create one DOM element.