纯css控制图片的宽。支持IE6+/谷歌浏览器/火狐/苹果等主流浏览器

CSS控制图片宽 让图片自动缩放

最新优化版代码:

img{width: expression(this.width > 660 ? 660: true); max-width: 660px;}
原版:

img { 
max-width:640px; /* 最大宽度为640px*/ 
/*width:640px;  图片的大小为64px如果打开这个所有图片都以640的宽显示,默认关闭*/ 
width:expression(width>640?"640px":width "px");max-width: 640px; /* 假如图片的尺寸超过640象素,那么就按640象素显示,高度同比例变化;假如图片的尺寸小于640象素,那么就原尺寸显示。在IE6中有效*/ 
overflow:hidden; /* 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形*/ 
}

以上代码的意思是当图片宽大于数值(我设置的是660)就会将宽控制在这个大小,这样可以统一大图的宽,可以阻止撑破页面。
若图片的宽度小于660px那么按本身尺寸显示,若超出660px则已660px的宽和等比的高显示。
使用时请注意不要给 <img> 标签内加宽和高。

效果图,(没有设置宽度,默认宽度为940,可以点击打开查看原图)
纯css控制图片的宽 全浏览器兼容.jpg支持IE6/谷歌浏览器/火狐/苹果等主流浏览器

转载请注明转自:一极乐http://yijile.com/log/98.html


话题相关文章

话题标签

代码CSSIE6

一极乐 为乐趣而生

《纯css控制图片的宽。支持IE6+/谷歌浏览器/火狐/苹果等主流浏览器》  发表时间:  最后更新时间:

谁来过

不知子曰邀请你对本文不足说出你的看法!

快点抢沙发

  1. 子曰去哪

    @蚂蚁
    有用哦,一直在用

  2. 蚂蚁

    这个写法对谷歌浏览器还是没用

  3. eseeker

    额,这个可以学习下,不过这个只显示部分图片貌似也不是很好的解决办法。

  4. 子曰去哪

    神马是只显示部分图片? /汗

  5. 夜色倾城

    正在用,效果不错。

  6. 子曰去哪

    @夜色倾城
    呵呵,我也找了许久。

  7. 子曰去哪

    @夜色倾城
    呵呵,我也找了许久。




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口说祝福


关闭

标签云

一极乐 衷心接受你的建议

TOP