Forums

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

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag