Css等比例缩放图片后截取图片中的一部分
因为在做一个简单的相册功能，做相册封面的时候我考虑了几种方法使用PHP在图片的缩略图上取出正方形的一块，但是Google一下后发现有更简单粗暴有效的使用纯CSS实现的方法截取前：
截取后：
CSS代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Css等比例缩放图片后截取图片中的一部分</title>
<style type="text/css">
<!--
.pic {
height: 100px;
}
.pic img{
clip:rect(10px 100px 90px 20px);
position: absolute;
width: 100px;
}
-->
</style>
</head>
<body>
<div class="pic"><img src="1.jpg" /></div>
<div class="pic"><img src="1.jpg"></div>
</body>
</html>
代码解释：
width: 100px把图片宽度缩放为100px
position: absolute绝对定位
position: relative: 相对定位
clip:rect(10px 100px 90px 20px)截取图片，分别是从 顶 右 底 左 四个部分截取
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还 是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是 很有帮助的。
页:
[1]