Mobile-friendly image gallery - html

Question

I'm creating an image gallery for a website. The images appear as a grid : there are 3 images on every line when I open the page on my computer, but I may get more or less depending on the width of the window. This doesn't look bad at all, but I would like to improve it, so that it shows only two images, or just one per row, depending on the screen size. I could use media queries, but I only have bad memories about them and I would like to avoid using them if possible. Here is what my HTML looks like :
<div id="image_container">
<div style="background: url("image 1 url") center center no-repeat"></div>
<div style="background: url("image 2 url") center center no-repeat"></div>
(....)
<div style="background: url("image x url") center center no-repeat"></div>
<span style="display:block; clear: both;"></span>
</div>
and the CSS :
#image_container{
width: 95%;
margin: 5% auto;
border-radius: 10px;
border: 1px solid grey;
}
#image_container>div{
float: left;
width: 290px;
height: 164px;
margin: 2px;
overflow: hidden;
border-radius: 5px;
}
Thanks

Answer 1

The cheap way to do it is to change this in #image_container>div:
width: 100%;
max-width: 290px;
This trick will ensure that on too-small screens, the image will only take up the screen width and not the specified 290px.
Now you need to keep the aspect ratio. To do that, first calculate it: 164/290 = 56.55%. Take this value, remove the height from your styles, and add this:
#image_container>div:before {
display: block;
content: '';
padding-top: 56.55%;
}
This will give aspect ratio to your box, due to the clever trick that padding-top is a percentage of the parent element's width (and pseudo-elements are children of their main element).
With these combined, your boxes will stay the same shape but just get smaller if there isn't enough room.
That said, two points for you:
Media queries aren't all bad. Maybe you were just doing something not quite right with them. I would suggest looking into them again, as they are very powerful.
Generally the smallest width you need to worry about is 320px, the width of an iPhone. I haven't yet encountered a smaller screen than that, so your 290px boxes should be fine anyway.

Answer 2

If you're willing to use a framework like Bootstrap, you could use its grid system to get pretty much what you're looking for without doing the media queries yourself. You would just need markup like this:
<div id="image_container">
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
<div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
</div>
As long as the number of images displayed on each row is a factor of 12 (1, 2, 3, 4 or 6), then you'll always have complete rows.