如何使用全CSS显示在浏览器窗口中调整大小并流动的全尺寸图像网格
Shridhar Gupta
我正在尝试在网格中显示一组图像，如果可能的话，我想使用纯CSS在iTunes中重现专辑网格视图的效果。
所需功能（视频：http : //quick.as/17l3sdgr）：
- 图像应显示在带有一些填充的网格中，以填充浏览器的宽度。
- 调整窗口大小时，图像和填充会缩小，直到达到最小的img宽度（假设为150px）。
- 然后将一个图像推到下一行，并且图像变大直到窗口宽度再次减小。
我知道使用JavaScript可以实现，但是CSS可以提供更好的性能。是否可以？
编辑：我录制了一个截屏视频，以显示iTunes的功能：http : //quick.as/17l3sdgr
Shridhar Gupta
JS小提琴
Cooluhuru的回答使我朝着正确的方向前进。
从Cooluhuru的答案开始：
img
{
float:left;
width : 31%;
padding : 1%;
max-width: 150px;
min-width : 100px;
}
它以基于百分比的填充将图像以网格图案浮动。要求最大宽度和最小宽度。
下一步：
现在，我们在图像溢出到下一行（甚至之前）的点上添加媒体查询，但是图像不会达到最大宽度。
对于200x200px的图片，该尺寸为（464px，690px，860px，1040px）。断点将取决于图像宽度，因此这仅适用于相同尺寸宽度的图像。
接下来，对于每个断点，仅需要调整图像宽度％，以使图像以最小的媒体查询状态填充行，并且足够小以使图像可以增长。
笔记：
- 最好有固定的填充，因为随着窗口变大，填充会越来越多。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用CSS将GIF大小调整为浏览器窗口尺寸
- 2
如何使用网格使图像适合浏览器窗口？
- 3
除非调整浏览器窗口的大小，否则Angular ui网格不会显示内容
- 4
除非调整浏览器窗口的大小，否则Angular ui网格不会显示内容
- 5
浏览器窗口调整大小时如何在CSS中调整梯形大小
- 6
浏览器的图像全宽
- 7
CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小？
- 8
如何随着浏览器宽度/高度的变化动态调整图像网格的大小？
- 9
如何在div元素中获取浮动图像行以使用浏览器窗口调整大小
- 10
CSS窗口根据浏览器高度调整大小
- 11
如何使图像自动调整大小以适合浏览器窗口的高度
- 12
如果调整了浏览器窗口的大小，是否可以重新计算使用的“ srcset”图像？
- 13
如何仅跟踪浏览器窗口调整大小
- 14
HTML / CSS：调整浏览器窗口大小时如何使网页保持原状？
- 15
CSS网格在浏览器中显示不同的大小
- 16
调整浏览器窗口大小并截图
- 17
子菜单必须为浏览器窗口的全宽
- 18
Titleblock英雄根据浏览器大小缩放全高
- 19
如何使用浏览器大小单独调整div的大小？
- 20
如何使CSS图像容器适应不同的浏览器尺寸
- 21
使用img最大宽度在浏览窗口中自动调整图像大小：父级div的位置：绝对时，Chrome浏览器中的100％有效，但IE中不起作用
- 22
使图像在SquareSpace上的浏览器全宽
- 23
调整浏览器窗口大小时，如何正确调整textarea的大小？
- 24
每当浏览器窗口变窄时，我应该使用什么代码自动调整图像大小？
- 25
HTML / CSS定位〜屏幕尺寸/分辨率和浏览器大小调整
- 26
调整浏览器大小时如何隐藏DIV中的部分HTML文本？使用 CSS）
- 27
如何在UIPageViewController中以全尺寸显示图像？
- 28
调整浏览器窗口大小时，图像顶部的HTML按钮不会保持固定
- 29
在浏览器窗口调整大小后找出新的图像宽度高度
我来说两句