相比于单个图片，图库的展示无疑更加复杂，牵涉到的变量更多，所以实现起来也更加费神。打开一个漂亮精致的网站，然而其中的图片和图库看起来怎么都和页面不匹配，这样的情况恐怕是最让人抓狂的了。如何设计好响应式的图片和图库，接下来就聊一些方法技巧，兴许能给你提供一个明确而系统的思路。

　　1、避免使用图片标题

　　使用图片标题或者其他的附加文字会为你自己和用户增加大量的问题。它在移动端界面上会强制显现出来。在移动端有限的界面空间上，它可能会和图片挤压到一起，带来混乱的用户体验。另外它可能会限制你的文字使用。你得想明白在桌面端显示和在移动端显示分别是什么样，怎么才正常，太多的变量控制起来会相当麻烦。图片各不相同，而文字总会莫名其妙地覆盖到某些不该覆盖到的地方。图片和文字的对比度总会随着不同的图片而变化，这也是麻烦的地方之一。

　　2、避免使用大量肖像类图片

　　如果你设计的图片库是类似网格布局的话，你可能会尽量挑选和横向的图片，或者方形的图像。这样的设计在兼容桌面端设计的同时，还可以让用户在小屏幕上更好地查看。人像类的图片在手机上适合纵向屏幕上浏览，如果横过来的话，图片会显得特别小，浏览会相当不方便。横向是最佳的，如果不行的话，使用方形的图片会是很好的兼容性方案。一个响应式的图片库的设计需要考虑多种因素，请务必照顾到用户的不同浏览场景。

　　3、在移动端上支持手势操作

　　在设计响应式图片库的时候，滑动操作等手势操作赋予用户更多的权力，让体验更加逼真。在移动设备上使用箭头导航太过于乏味、老旧，手势交互更加自然也更符合真实的交互体验。

　　4、使用高素质的图片

　　虽然这个道理不言自明，但是我再强调一次。现在，高素质、高分辨率的图片比以往任何一个时代都显得必需和重要，用户不会花费时间去看一个图片素质低下的网站，大家的屏幕都已经是视网膜屏幕了，低素质的图片在这样的屏幕上显得更加无法直视。大家都在追求顶尖的视觉效果，那么高素质图片无疑是必需品。

　　5、图片和视频混用要小心

　　如果网站中同时存在图片和视频类的多媒体，用户和设计者应该都是能够接受的，甚至许多用户已经习惯了这样的设计。但是要注意的是，即便是在同一个页面中，也尽量不要让图片和视频同时存在于同一个控件或者区块中，也许这样看起来很炫酷，也许一部分图片和视频能够搭配起来，但是更多的视频和图片很难在尺寸上保持一致，导致总会有一部分图片或者视频会留下空白和间隙。最好的方案还是将两者分开展示，避免了媒体属性和尺寸上的差异与冲突，这几乎适用于任何设计元素，而图片和视频尤甚。   

　　6、确保图片显示尺寸不要超过原始图片的最大宽度

　　这一点很重要，尽管很基础，但是依然需要强调一下。图片尽量不要去填充超过本身尺寸的空间，这样会让图片表现出象素化的失真效果。值得注意的是，很多情况下图片在移动端完全填满某个区块没问题，但是在桌面端的时候，最大也不能超过本身宽度。这似乎并不难?但是依然有许多响应式页面，当你拉宽浏览器界面的时候，会有图片超出本身尺寸来显示。

　　7、图片缩放

　　如果你的图库中的图片要牵涉到图片缩放，那么尽量让图片去缩小，而不是放大。甚至最好是为图片设定精确的尺寸。通常，图片缩放会使用百分比来控制它的大小变化，如果你个属性被设定为按照百分比来缩放，那么其他的相关属性最好设置为自动。比如将图片宽度设定为50%，那么高度缩放应当设定为自动。对于绝大多数的网站而言，图片展示的位置都很相近，大同小异。而设计师的任务，是要确保网站随着屏幕和设备变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。

　　8、避免使用图片标题

　　使用图片标题或者其他的附加文字会为你自己和用户增加大量的问题。第一个问题是，它在移动端界面上会强制显现出来。在移动端有限的界面空间上，它可能会和图片挤压到一起，带来混乱的用户体验。另外一个问题是，它可能会限制你的文字使用。你得想明白它怎么断句，占据多大空间，在桌面端显示和在移动端显示分别是什么样，怎么才正常，太多的变量控制起来会相当麻烦。图片各不相同，而文字总会莫名其妙地覆盖到某些不该覆盖到的地方。图片和文字的对比度总会随着不同的图片而变化，这也是麻烦的地方之一。

　　蓝彩seo结语：

　　小心驶得万年船，当你开始为图片库进行响应式设计的时候，这些说大不大说小不小的问题逐渐开始显现，总出其不意的影响整个设计和体验。以用户为重心，小心绕过这些坑，会让你的网页更优秀。