Css控制图片大小,自适应缩放,兼容IE6和Firefox
来源:程序员人生 发布时间:2013-10-11 11:11:42 阅读次数:2708次
Css控制图片大小,自适应缩放,兼容IE6和Firefox,例如我们在日常的网站设计当中,总是会遇到这样的问题,图片大小未知,而我们设计的网站内容区域的宽度是一定的,如果给所有图片设置等量的宽度显示是不行的,通过查询CSS手册,我们知道max-width和max-height可以控制图片的大小,如果图片宽度超过内容区域,则限制其大小为指定的宽度,但是杯具总是发生在IE6身上,一个做下载站的哥们今日联系网小编,他也遇到这个问题,他非常关注IE6的支持,本来网已经放弃了IE6,但是为朋友两肋插刀是必须的,解决方案自然就有了。
不废话了,上代码:
<style type="text/css">
.content-width {MARGIN: auto;WIDTH: 600px;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;}
</style>
</head>
<body>
<div <p><img src="wfuyu_com1.jpg"/></p>
<p><img src="wfuyu_com2.jpg"/></p>
</div>
友情提示:
上面设置的图片宽度为600PX,示例图片为网的,请动手将宽度和图片地址都替换为自己的。
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠