Get a free trial // Grow your CSS skills // Land your dream job

Thumbnail Images (varying aspect ratios) centered horizontal and vertical in 1:1 containers

  • # July 10, 2013 at 10:05 am

    Hey folks. I’m so so with CSS but haven’t been able to find a solution.

    I’m trying to create a responsive thumbnail gallery with the following requirements:

    Thumbnails must be responsive and 3 across for desktop and 2 across for mobile. No biggie here.

    The hard part. Thumbnail images varying in aspect ratio must be centered horizontally and vertically in a square 1:1 aspect ratio container with padding.

    Any ideas?

    Here is an image example: [Thumbnails Image]( “Example thumbnails image”)

    Any help appreciated.

    # July 10, 2013 at 10:15 am

    div { width: some width;
    height:some height;

    img { display: block; margin: auto ; }

    # July 10, 2013 at 3:19 pm

    Thanks everyone. @CrocoDillon may have nailed it. I will have to test later when I get home.

    # July 14, 2013 at 8:16 pm

    So I am playing with the code provided by @CrocoDillon. Seems to get what I am looking for.

    The only thing I’m having trouble with is getting some spacing between the square thumbnail containers which can be seen in my [reference image]( “Reference image”).

    Trying some margins, padding and borders but failing.

    # July 14, 2013 at 9:09 pm


    .thumbnail {
    top: 5%;
    left: 5%;
    width: 80%;
    height: 80%;
    padding: 5%;

    make sure numbers add up (80% + 2 * 5% padding + 2 * 5% fake margin). If you need a border I suggest you use `box-sizing: border-box`, because it’s hard to make sure mixed percentage and pixel values add up. Then just the width/height and the fake margin need to add up to 100%.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed