javascript - JQuery 多个图像自动调整大小

Question

我希望当我扩大窗口时图像增加，当有另一个空间时，它会每行加一个…</p>

假设我打开 HTML 页面：

图像1 图像2 图像3 图像4 图像5 图像6 图像5 图像
6图像
7

如果我扩大窗口，图像会增加，然后我每行得到 4 个图像（或更多）：

图像1 图像2 图像3 图像4 图像5 图像
6 图像7

如果我减少，我将采取相反的行动，例如：

图像1
图像2 图像3 图像4 图像5 图像
6图像
7

像这样的东西：http: //pixelgrade.com/demos/lens/

我很感激任何帮助:)

Answer 1

你可以给这张图片一些css属性

img {
  float:left;
  /*or*/
  display:inline-block;
}

查看此演示浮动或 内联块

对于响应式尺寸，您可以使用媒体查询，但您需要知道在每种浏览器尺寸下您希望看到多少张图片。比如 1000px 到 1200px 每行 3 张图片，1000px 以下只有两张图片。

新的演示响应大小

Answer 2

你为什么不直接研究他们的 CSS 文件呢？它没有缩小:) http://bit.ly/16v64Vo

从那里您可以发现我们正在使用网格系统，并且我们根据分辨率更改每行的图像数量。

为每个图像添加一个类（例如，mosaic__item），然后使用@media 查询为它们分配不同的宽度：

@media only screen and (min-width: 1201px) {
    .mosaic__item {
      width: 33.33333%; 
    } 
}

@media only screen and (min-width: 901px) {
   .mosaic__item {
      width: 50%; 
   } 
}
@media only screen and (min-width: 600px) {
   .mosaic__item {
      width: 100%; 
   } 
}