CSS交互式图片对比组件

通常在我们在需要对某地或者某物不同时期的情况对比时，多采用图片并列或者图片轮播的形式，但是这样的形式并不直接，且缺乏交互性。为了解决这个问题，我们可以采用交互式的图片控件来实现。其主要思想就是将两张前后图重合，用户可以自由选取图片的显示部分，效果如下：

为了实现这个效果，我们将使用resize属性，使其可以在横向变形。为了防止图片拉扯变形，我们用一层div将一张图包裹，置于另一张图的上层。这是仅需调整div框的长度就可以实现图片显示区域的变化。

    DOM结构如下：

    <div class="slider">

      <img src="pic.jpg" alt="">

      <div>

        <img src="pic.jpg" alt="">

      </div>

    </div>

同时为了更加明显提示图片是交互式，可调整的，我们引入一个滑动条来实现这种调整。