1

I'm trying to create a responsive gallery of fixed-width images. I need the number of images on a given row to vary based on the width of the browser window, and the row of images to be centered on the page.

Either of two ways is fine. There can be a constant number of pixels between each image (10px for instance), and the container div can change width to match. Or the container div can be fixed-width, and the distance between the images varies to fit.

Thanks in advance

drewd423
  • 341
  • 1
  • 6
  • 14
  • 2
    [Please show what you've tried so far](http://whathaveyoutried.com) and describe the specific issues you're having. Including a [Fiddle](http://jsfiddle.net/), [Deck](http://cssdeck.com/), etc. with any snippets would be appreciated, but isn't always necessary. But, Stack Overflow isn't a coding service. – Jonathan Lonowski Sep 14 '13 at 04:29
  • I've tried `li{float: left}` and `li{display: inline-block}` which create the gallery like you'd expect, but then I can't center the entire thing on the page. `text-align: justify` has no effect (I assume because it doesn't know where the line break is). I tried using the "stretch" method [here](http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs) but it doesn't allow for the number of images on a given row to change. – drewd423 Sep 14 '13 at 14:25

1 Answers1

2

Just a quick example, here's a Fiddle

<div id="gallery">
  <img src="/" alt="Image"/>
  <img src="/" alt="Image"/>
  <img src="/" alt="Image"/>
  <img src="/" alt="Image"/>
  <img src="/" alt="Image"/>
  <img src="/" alt="Image"/>
</div>

#gallery {
  width: 960px;
  margin: 0 auto;
  padding-top: 10px;
  text-align: center;
  border: 1px solid #555;
}
img {
  margin: 5px;
  height: 280px;
  width: 300px;
}

@media all and (max-width:960px) {
  #gallery {
    width: 900px;
   }        
}
@media all and (max-width:720px) {
   #gallery {
     width: 660px;
   }
}
@media all and (max-width:480px) {
  #gallery {
    width: 420px;
  }
}
Milan and Friends
  • 5,560
  • 1
  • 20
  • 28