Square Thumbnail from unknown Image

[Stefan Drachsler]

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.

Thanks,
Stefan

[Senff]

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.

[Author]

Posts