JQuery 多个图像自动调整大小

JQuery Multiple Images Auto Sizing

本文关键字：调整 图像 JQuery      更新时间：2023-09-26

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

假设我打开 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/

我感谢任何帮助:)

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

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

查看此演示浮点数或内联块

对于响应式大小，您可以使用媒体查询，但您需要知道在每个浏览器大小下要查看多少图像。像 1000px 到 1200px 每行 3 张图像，低于 1000px 只有两张图像。

新的演示响应大小

你为什么不直接深入研究他们的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%; 
   } 
}
相关文章：