The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Square Thumbnail from unknown Image

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #39830

    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:

    However, if the image in question is landscape mode, you will see space at the top and bottom:

    The solution for that would be this: (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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.