JQuery 多个图像自动调整大小

2 回答

• 2

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

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

  查看此演示Float或Inline-block

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

  新演示响应大小

  回复于 2024-04-19T15:17:25+08:00
• 0

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

  从那里你可以发现我们正在使用网格系统并且基于分辨率我们改变每行的图像数量。

  向每个图像添加一个类(例如 mosaic__item)，然后为它们分配不同的宽度 using @media query：

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

  回复于 2024-04-19T15:17:25+08:00