利用CSS按比例缩小图片

本文介绍了如何使用CSS的max-width和max-height属性来按比例缩放图片,适用于现代浏览器。对于IE 6.0及更低版本,文章提到了使用Expression的解决方案,将缩放脚本直接写入CSS,以确保图片在50px*50px以内并保持比例。同时,文章还提及了图片保持比例的原理。
摘要由CSDN通过智能技术生成
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。阅读全文...

对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:
引用内容 引用内容
<img src="..." alt="..." οnlοad="resizeImage(this)" />
<script type="text/javascript">
function resizeImage(obj) {
    obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
    obj.height = obj.height > 50 ? 50 : auto;
}
</script>


这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:
引用内容 引用内容
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值