Page 92 - css揭秘

<div class="picture"> HTML
<img src="adam-catlace.jpg" alt="..." />
</div>

.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg);
} 图 3-18
原版图片；我们将把它裁切进一
但是，我们在图 3-19 中可以看到，它并没有一步到位地直接达到我们 个菱形中
期望的效果，除非我们期望的效果是把它裁成一个八角形——如果是那样的
话，我们就可以到此为止然后去研究点儿别的什么。如果要把图片裁成一个
菱形，恐怕还得再费一番周折。

主要问题在于 max-width: 100% 这条声明。100% 会被解析为容器
（.picture）的边长。但是，我们想让图片的宽度与容器的对角线相等，而
不是与边长相等。你可能已经猜到了，没错，我们又要用到勾股定理了（如
果你需要复习一下，请翻回“斜向条纹”一节）。这个定理告诉我们，一个
正方形的对角线长度等于它的边长乘以 2 ≈ 1.414 213 562 。因此，把 max-
width 的值设置为 2 100%× ≈ 414.421 356 2% 是很合理的，或者把这个值 图 3-19
相反的 rotate() 变形样式并不
向上取整为 142%，因为我们不希望因为计算的舍入问题导致图片在实际显
足以达到期望的效果（.picture
示时稍小（但稍大是没问题的，反正我们都是在裁切图片嘛）。 div 用一个虚线框标示）
如果用 scale() 变形样式来把这个图片放大，实际上会更加合理，原
因如下。

„ 我们希望图片的尺寸属性保留 100% 这个值，这样当浏览器不支持变
形样式时仍然可以得到一个合理的布局。
„ 通过 scale() 变形样式来缩放图片时，是以它的中心点进行缩放的
（除非我们额外指定了 transform-origin 样式）。通过 width 属性
来放大图片时，只会以它的左上角为原点进行缩放，从而迫使我们
动用额外的负外边距来把图片的位置调整回来。
图 3-20
把以上这些分析结果整合起来，就可以得到以下代码： 最终裁切后的图片效果

.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

11 菱形图片 61

඀ࠡ JOEC