精美而实用的网站,关注web编程技术、网站运营、SEO推广,让您轻松愉快的学习

客户在更新网站新闻产品的时候,往往工作人员根本不管图片尺寸就上传,图片尺寸如果超出页面的宽度很前台页面之间就撑开了,下面青岛星网跟大家分享:CSS解决图片过大撑开页面的方法。

CSS解决图片过大撑开页面的CSS代码如下

#qdxw img { max-width:400px; width:expression(document.body.clientWidth>400?"400px":"auto"); overflow:hidden; }

代码解释:

max-width:400px; 设置非IE6的其他浏览器的最大宽度为400px。注意这里不要设置高度了,才能自动缩放。

width:expression(document.body.clientWidth>400?"400px":"auto");针对IE6设 置的最大宽度控制,当宽度大于400px时,宽度设置为400px.如果小于或等于400px,则按照自身的宽度 - 原图宽度。、

overflow:hidden; 超出部分隐藏,避免变形!

现在来说IE6 浏览器的使用率已经非常低了,舍弃掉width:expression(document.body.clientWidth>400?"400px":"auto"); 其实也是可以的。

发散思维:同理也可以设置高度哦。

Tags:CSS max-width