首页 › ≡≡网络技术≡≡ › WEB前端 ›Css等比例缩放图片后截取图片中的一部分 ...

Css等比例缩放图片后截取图片中的一部分

灰儿 2012-2-9 13:27:56

因为在做一个简单的相册功能，做相册封面的时候我考虑了几种方法使用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">

</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时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。

使用道具举报