响应性网页设计已经成为大多数企业网站建设中当之无愧的标准配置。我们需要反应灵敏的技术来应对日益分散的屏幕尺寸。网页设计师也努力做到这一点。网页中图片和图库的响应设计也是重点和难点。它们是网页中常见且可见的元素。打开一个漂亮精致的网站，但是图片和图库与页面不匹配，可能会让人抓狂。

如果你想设计一个反应灵敏的图片和图库，以下七个小技巧可以给你一个清晰系统的思路。它们不涉及具体的代码实现，更多的是涉及设计过程和处理技术。如果我们把这些事情做好了，执行起来就不难了。

毫无疑问，桌面上的图像浏览体验与移动端完全不同。对于绝大多数网站来说，图片的位置非常相似，非常相似。设计师的任务是保证网站随着屏幕和设备的变化，在页面布局扩展和变化的过程中，图片的显示不会陌生和扭曲。

这时候请时刻记住图片的长宽比，时刻控制长宽比不变。回到桌面页面，大背景图片或者页面顶部的图片看起来非常漂亮。但是切换到移动设备，第一件事就是屏幕的尺度和方向不一样，那么还这么好看吗？图片缩小后信息呈现会丢失吗？会变长吗？

此时，控制图像的纵横比非常重要。控制原图像不被拉伸，尽可能合理地使图像显示部分的长宽比与对应的屏幕相匹配，这样就不用担心响应断点太多，导致上传的图片太多。

尺寸和比例的一致性

反应式设计离不开断点。为了照顾不同的屏幕，我们需要将图片切割成不同的比例和大小，这直接影响到整个设计和开发过程。

很多人只是把图片上传到CMS系统，希望呈现出详细的风格。这是不现实的。

每幅图像都应该被切割成合理的尺寸，并放置在理想的位置，以确保它们能够如预期的那样出现。后端可能在这上面花了很多时间和精力，但是值得。

轮播图控件和图库控件是网站中常见的图片载体，可以更自由的管理图片。特别是当你使用著名的或者广泛使用的第三方控件时，控制图像元素的繁重工作基本都会被这些控件接管。

但是，我们也需要注意上面提到的图片的长宽比和大小控制，否则网页的显示效果会很尴尬。另外，在什么场合需要使用什么样的控件。如果您有许多高质量的图像或需要推荐特定的文章和主题，您需要使用幻灯片转盘控件。如果您想显示大量图像，可以缩小显示范围，而不会有任何可读性问题。您可以使用画廊类的控件来显示它们。很多作品集网站经常使用图库控件。

图片描述虽然可以让图片信息量更大，但是会直接影响网页的操作。尽量避免使用，如果真的需要，尽量用其他方式表现出来。添加图像的标题属性后，在桌面上可以有很好的渲染效果，但是在小屏幕上有很多问题。为了防止这些小的可用性问题影响用户体验，尽量避免使用。就因为这么一个小问题，让用户承担离开不划算。