clip 猫有猫道，鼠有鼠道

最新推荐文章于 2025-06-04 22:29:11 发布

转载最新推荐文章于 2025-06-04 22:29:11 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuzhongwusan/archive/2008/08/28/1278368.html

文章标签：

#xhtml

本文介绍了使用CSS进行图片剪切和缩放的方法，包括如何通过设置宽度和高度实现图片的剪切效果，以及如何使图片按照指定的尺寸进行缩放，适用于新闻图片展示和网页设计。

转载请注明来自博客园雨中无伞

http://hi.baidu.com/wusantietu/album/item/c5a262ecc71861ccb31cb1f8.html 所需图片

http://hi.baidu.com/wusantietu/album/item/c5a262ecc71861ccb31cb1f8.html#IMG=7234674b33c8ac3b09f7eff8 浏览器效果

<!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>无标题文档</title>
<style>
.a,.a a{width:100px; height:50px;display:block; overflow:hidden;}
.b,.b a img{width:100px; height:50px;display:block;}
</style>
</head>

<a href="#"><img src="images/ad.jpg" /></a><P> </P>
<div class="a"><a href="#"><img src="images/ad.jpg" /></a></div><P> </P>
<div class="b"><a href="#"><img src="images/ad.jpg" /></a></div>
</html>
.a出现的图片是剪切的效果
也就是clip从左上角开始剪切的效果<这个属性我没有用到，以前看过，但是实际工作中还没有用到，不过如果我们想从左上角剪切的话，用我这种方法也不错啊，至少少写一个属性，缺点是你又忘记了一个CSS属性
.b是按照我所设置的宽高进行了缩放,这个用到的是一般是新闻或者上163上看那些艳门照之类的图片，图片大的话，就这样给压缩了，小公司就是这么做了，像163人家就是做这么大小的图片，恩，猫有猫道，鼠有鼠道吧

转载于:https://www.cnblogs.com/yuzhongwusan/archive/2008/08/28/1278368.html