有时候我们需要向别人展示两幅图像的视觉差异，通常一幅是修改前的图像、一幅是修改后的。例如，把两幅图像放在一起，展示照片处理的效果。比如一些美容师的网站要展示某些美容护理的效果，某个地理区域发生灾难的结果。
最常见的方案是将两张图片并排放置。但是，这样的话人的眼睛就只能注意到非常突出的差异、而察觉不到那些小的变化。如果对比不是那么重要或者两图之间的差异非常大的话，这种方法是没有问题的，但是对于其它情况呢，我们需要一些更好的方法。
从用户体验的角度看，这个问题有很多解决方案。一种常见的解决方案是通过一个GIF动图或CSS动画在同一个位置快速连续地显示两张图片。这比两张图片并排放要好很多。但是用户要发现这之间的差异也比较耗时，因为用户需要等待好几次迭代，好让他们的眼睛能够把整张图片观察完。
一个交互式图像对比小部件的例子，可以使用户对比2011年伦敦暴动带来的灾难性结果，来自英国主要新闻媒体The Guardian。用户可以拖动两幅图像中间的白色竖条，但是并没有提示来告诉用户“这是可以拖动的”，这就是为什么需要帮助文本（“Move the slider…”）了。理想情况下，一个良好的、可学习的界面是不需要帮助文本的。
一个更实用的解决方案是“image comparison slider”。它把两个图像叠加在一起，让用户拖动divisor进行选择，是显示这一个还是另一个。当然，这样的控制在HTML中不是实际存在的。我们需要通过我们真实存在的元素来模拟它，多年来也一直有许多实现这个效果的示例，通常需要JavaScript框架和一大堆的JS代码。
在一些变型中，用户可以直接移动鼠标来代替拖动。这样做的好处是可以更容易让用户注意到并去使用，但是体验却是相当刺激的。
有没有什么简单的方法可以实现这样的一个控制？当然有，而且有俩！
CSS resize方案
如果我们仔细想想，image comparison slider通常包括一张图像，和一个水平方向大小可调的元素，用于显示另一张图像。这通常就是需要JavaScript框架的地方了：让顶部的图像水平方向大小可调。但是，我们并不是一定需要脚本来让元素大小可调。在CSS3中，我们有这样一个属性： resize 。
即使你没有听过这个属性，你很可能已经使用过它，因为它在 中的默认值是 both ，这使得它们在各个方向都是可调整的。但是，实际上它可以被设置在任何元素上，只要它的 overflow 属性值不是 visible 。几乎所有元素的 resize 属性的默认值都是 none ，这使得它们不能调整大小。除了 both ，它还接受 horizontal 和 vertical 值，用来限制哪个方向可以调整大小。
给 应用 resize: vertical 是一个不错的方法，既可以禁用水平调整，又保持大小可调整，因为水平调整通常会破坏页面布局。
这里可能有一个疑问：我们也许可以使用这个属性来实现我们的图像滑块？不试试怎么知道呢！
我们的第一个想法可能是使用两个 元素。但是，直接给 应用 resize 看起来非常丑，直接调整图像大小的话会导致扭曲。所以，还是把它应用到一个
容器中可能比较合理。因此，我们的HTML标签如下：
查看更多关于CSS秘密花园：交互式图像对比_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did111778