- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Thumbnail Images (varying aspect ratios) centered horizontal and vertical in 1:1 containers
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.
div { width: some width;
height:some height;
vertical-align:middle;
display:table-cell;
}
img { display: block; margin: auto ; }
Thanks everyone. @CrocoDillon may have nailed it. I will have to test later when I get home.
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.