在网页设计布局中会用到很多的图片，如果这些图片需要在一个页面中展示并且图片大小不一，如下图所示的情况，就会牵扯到这些图片怎么排列的问题，今天小编就给大家讲解下常见图片排序的一些方法。

不规则图片排列

第一种：图片伸缩变形为同一大小。最常见的排序方案，无论图片大小比例为什么，统一拉伸缩放到一个大小，图片样式设置为img{width: 100%;height: 100%;},这种排序简单粗暴不在乎图片变形问题，很多网站往往会采用这样的方式。

图片伸缩我同一尺寸

图片拉伸变形

第二种：图片等高度，宽度自适应。图片如果很多的情况下采用的一种排序方式，图片外框高度固定，图片大小缩放到统一高度，宽度自适应，图片样式设置为img{width: auto;height:100%; }，这种排序需要图片很多并且需要程序计算图片宽度，保证每行总宽度相等。

图片等高排列宽度自适应

这种排序比较典型的案例是百度图片搜索页面，它使用的就是这种排序，是基于图片数据很大并且程序计算，保证了每行总宽度基本相等。

图片等高排列宽度自适应

第三种：图片等宽度，高度自适应。图片如果很多的情况下采用的一种排序方式，图片分多栏，图片高度不同会有错位效果。图片样式设置为img{width: 100%;height:auto;}俗称瀑布流，多用于图片展示型网站和购物网站中。

图片等宽排列瀑布流

比如蘑菇街就是采用这种排序方式

图片等宽排列瀑布流

第四种：图片外框大小固定，图片缩放自适应外框。这种方式基本和第一种一样，不同的是图片不会变形。图片样式设置为img{max-width: 100%;max-height:100%;}

图片缩放宽高自适应

图片缩放宽高自适应

第五种：图片大小不变，错位布局。类似拼图效果这种方式最麻烦，需要绝对定位才能保证不错位，使用的比较少，遇到这种情况多使用ps排版。

拼图效果

好了，到这里图片排序布局常见的5种方式就介绍完了，至于应用中采用哪种比较好就需要具体场景具体分析了，我的建议是：

一：如果图片少要求不高的话采用第一种最省心，如果客户要求图片不能变形的话采用第四种比较好；

二：如果图片比较多的话，如果主要是pc端浏览的话采用类似百度图片那样的第二种排序，如果主要是移动设备浏览的话采用蘑菇街类似的瀑布流也就是第三种布局；

三：如果牵扯的拼团效果的话，最好的方法还是ps做成一张图片最好，使用css的话部分浏览器会错位影响效果。