Question

我希望当我展开窗口时图像会增加，当有另一个窗口的空间时，每行会加一个......

假设我打开HTML页面：

image1 image2 image3
image4 image5 image6
image5 image6 image7

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

image1 image2 image3 image4
image5 image6 image7

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

image1 image2
image3 image4
image5 image6
image7

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

我感谢任何帮助：）

Answer 1

你可以给这个图像一些css属性

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

查看此演示 Float 或 Inline-block

对于自适应尺寸，您可以使用媒体查询，但需要知道每种浏览器尺寸要查看的图像数量。像1000px到1200px每行3个图像，1000px以下只有两个图像。

新演示 Responsive Size

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

JQuery多个图像自动调整大小

2 个答案: