How to Center Crop an Images on Web using CSS/JS

Question

Got some images with different sizes and I want to make some thumbnail out of them. If I use overflow:hidden the output image would be the top left of the original image, while I want it to be the exact center of Image, as pixels I want it to be.Been searching for this for a while, but nothing really useful ...

Answer 1

Instead of using an img , you can use a div with the image as the background, and use the CSS background-position property to center it. Or you could use an img inside a div with overflow: hidden and use a margin on the image to center it.

But FYI, thumbnails should be generated server-side, otherwise you're sending the whole image anyway.

Answer 2

So, is your thumbnail just a tiny portion of the whole image? Why not resize image in the server and display it inside image tag with a predefined size? You can skip the server side resizing if your images aren't very large and just do the following: <img src="image.jpg" alt="Some image" height="42" width="42" /> . Just change the image size to whatever you prefer.