Page 197 - css揭秘

动手试试才知道！
我们的第一个念头可能是列出两个 <img> 元素。但是，直接对一个
<img> 元素应用 resize 看起来会很怪异，因为直接调整图片大小会导致其
变形失真 1① 。如果用一个 <div> 作为它的容器，再对这个容器应用 resize
属性，那就合理多了。于是，结构代码会变为：
HTML
<div class="image-slider">
<div>
<img src="adamcatlace-before.jpg" alt="Before" />
</div>
<img src="adamcatlace-after.jpg" alt="After" />
</div>

接下来还需要添加一些 CSS，完成定位和设置尺寸的工作：

.image-slider {
position:relative;
display: inline-block;
}

.image-slider > div {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 50%; /* 初始宽度 */
overflow: hidden; /* 让它可以裁切图片 */
}

.image-slider img { display: block; }

现在的效果如图 6-26 所示，但它还是静态的。如果手工修改宽度值，
就可以模拟用户在调整大小时所能看到的各个阶段的效果。为了让它的宽度
图 6-26 可以动态地根据用户的交互发生改变，我们就要请出 resize 属性了：
在加入了一些基本样式之后，这
个控件已经变得挺像那么回事儿 .image-slider > div {
position: absolute;
了，但我们暂时还不能调整上层
top: 0; bottom: 0; left: 0;
图片的宽度 width: 50%;
overflow: hidden;
resize: horizontal;
}

虽然能看出的变化只有上层图片右下角的那个调节手柄（参见图
6-27），但我们已经可以拖动这个手柄来随心所欲地调整上层图片的宽度
了！不过，在稍作尝试之后，我们还是会发现一些缺点。

„ 可以把 <div> 的宽度拉伸到超过图片宽度的程度。
„ 调节手柄不容易辨认。

① 一旦 object-fit 和 object-position 得到浏览器的广泛支持，就不存在这个问题了。因为
有了这两个属性，我们就可以像控制背景图像的缩放那样去控制图片的缩放了。

166 第 6 章 用户体验

඀ࠡ JOEC