人的头脑太复杂,时间过得久,有时候连自己也被自己骗了,记下来才是最真实的...... 注册 | 登陆

CSS限制图片最大尺寸代码--图片自适应大小

图片自动适应大小代码, 自己解决无果--不是这个不兼容就是那个不兼容,在网上寻寻觅觅多时,终于搞到个完美的。经测试, FF2、IE5.X、IE6.0、IE7.0有效,其他暂时还不知道。

.img {
max-width:300px;
/*width:300px;*/ 
 width:expression(width>300?"300px":width+"px");max-width: 300px;
 overflow:hidden;
}

◎ max-width:300px; 在IE7、FF等其他非IE浏览器下最大宽度为300px。但在IE6中无效。
◎ width:300px; 在所有浏览器中图片的大小为300px;固定的宽度,视你是否需要固定宽度而定
◎ 当图片大小大于300px,自动缩小为300px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

上面的方法好像第一次访问图片很小,换成下面这个就可以了

img{width:expression(width>675?"675px":"auto");}

新收藏一段:

<style type="text/css">
<!--
img,a img{
border:0;  
margin:0;  
padding:0;
max-width:650px;
width: expression(this.width > 650 && this.width > this.height ? 650px : 'auto';);  
max-height:1650px;
height: expresion(this.height > 1650 ? 1650px : 'auto';);
} -->
</style>

Tags: 图片尺寸, 图片自适应

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8

8条记录访客评论

IE6.0用惯了,永别的不习惯!

Post by 活动房 on 2009, August 18, 4:11 PM 引用此文发表评论 #1

IE8.0中也可以的!

Post by 造型设计 on 2009, August 18, 4:01 PM 引用此文发表评论 #2

:D 我的blog换域名以及名称了,麻烦改下
将 尢儿的布格格  改为新地址以及名称 3Q~
新名称 叉叉兵 新地址 xxbin.com

Post by 西崽猪猪 on 2009, February 21, 7:13 PM 引用此文发表评论 #3

学习了!~~·

Post by feifi on 2009, February 8, 1:31 PM 引用此文发表评论 #4

元旦快乐

Post by 西崽猪猪 on 2008, December 31, 7:24 PM 引用此文发表评论 #5

ohoh ,我过来是对你说,新年快乐 :)

Post by 白菜林 on 2008, December 31, 5:43 PM 引用此文发表评论 #6

IE6可以下岗了……太多要兼容的东西了 而且PNG透明问题无法解决

Post by 西崽猪猪 on 2008, December 29, 12:19 PM 引用此文发表评论 #7

CSS确实非常好用。

Post by 推荐酷站 on 2008, December 29, 12:02 PM 引用此文发表评论 #8


发表评论

评论内容 (必填):