css - 如何制作响应式图片库？

Question

我正在尝试创建一个响应式的固定宽度图片库。我需要给定行上的图像数量根据浏览器窗口的宽度而变化，并且图像行在页面上居中。

两种方式都可以。每个图像之间可以有固定数量的像素(例如 10px)，并且容器 div 可以更改宽度以匹配。或者容器 div 可以是固定宽度的，图像之间的距离会变化以适合。

提前致谢

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;
  }
}