css - How to make a responsive image gallery?

Question

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

Answer 1

只是一个简单的例子，这是一个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;
  }
}