CSS样式控制图片裁切显示 - HTML/CSS教程 - 网页制作

ljjk5

元帅

UID 46706
精华 1
积分 99426
帖子 49690
威望 554
金币 48489
热心 505
阅读权限 100
注册 2007-2-25
状态离线

使用道具

发表于 2007-4-15 05:48 资料个人空间主页短消息加为好友

CSS样式控制图片裁切显示

　　我们在论坛新闻系统的时候，其中的有些图片会比较大破坏了整体布局的美观，现通过CSS定义方式使图片进行裁切显示，即，当图片的容器不足以显示整个图片时，会以左上角为开始显示，不足显示的将会隐藏。相关各位同仁也有此想法。现有以下CSS样式，所以贴出来同各位WEB 开发者共享！
　　当然有人用img 的onload 事件对其宽高进行js控制，不过经招有时会因网页加载过快，或过慢而来不及执行，现向大家推荐代码如下，自行研究。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">.divClass{height:100%;width:100%;overflow:hidden;Margin-bottom:5px}</style><title>COPY数据到ID群集中by ID | 图片CSS定义裁切显示| 文字的宽度自适应缩放</title></head>
<body ><div id="airzen" class="divClass"><img src="/ShowImg.asp?p=/2006-4-27/7456454187236.jpg"></div></body>
　　说明：以上样式你可以自己定义，但要保留overflow:hidden;祝各位工作愉快！

　　

[广告] 免费域名(Free Subdomain) 免费空间(Free hosting) PR查询(Google Pagerank)

网友生活网 \| 网友学堂	如何获得金币？	诚招斑竹	IP归属地查询 PR查询收录查询 whois查询
免费超短2级域名,your.jpy.cc	传世私服 \| 传奇世界私服	注册亚洲交友中心，找个人来同居吧！	免费存储空间，免费网络硬盘