The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Square Thumbnail from unknown Image
I have to generate square thumbs from various images (i don’t know the resolution!).
I can use a div with a fix width & height as a container (overflow hidden). Then i can place the image inside and resize it until the smaller side fits into the container. no problem.
but i would prefer to CENTER that image. But i don’t know which way i have to move it (to the left or top). Neither do i know how far i have to move it.
Any hints? I would prefer a pure CSS Solution.
This should work: http://jsfiddle.net/senff/WCKKM/
However, if the image in question is landscape mode, you will see space at the top and bottom: http://jsfiddle.net/senff/WCKKM/1/
The solution for that would be this: http://jsfiddle.net/senff/WCKKM/2/ (background size is different)
Though you could try image size detection and then based on that, use different classes — one has background size 100%, the other one auto 100% or something.