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](http://i.imgur.com/2rKp9zO.jpg “Example thumbnails image”)

    Any help appreciated.

    # July 10, 2013 at 10:15 am

    div { width: some width;
    height:some height;
    vertical-align:middle;
    display:table-cell;
    }

    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](http://i.imgur.com/2rKp9zO.jpg “Reference image”).

    Trying some margins, padding and borders but failing.

    # July 14, 2013 at 9:09 pm

    Try:

    .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.

*May or may not contain any actual "CSS" or "Tricks".