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

Answer 2

我使用Bootstrap和jQuery创建了一步一步的教程：

这里的第1部分：

使用Bootstrap框架创建响应式照片库： http://fearlessflyer.com/create-a-responsive-photo-gallery-with-bootstrap-framework/

和第2部分： 让我们将下一个和上一个按钮添加到我们的Bootstrap照片库 http://fearlessflyer.com/next-and-previous-buttons-bootstrap-photo-gallery/

这是演示： http://demo.fearlessflyer.com/html/demo/bootstrap-photo-gallery/

如何制作响应式图库？

2 个答案: