网管程序员论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 1370|回复: 0

css让图片等比例缩小的代码

[复制链接]
发表于 2013-10-10 11:49:40 | 显示全部楼层 |阅读模式
随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站

这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?

那就利用css的强大功能吧。

先附上代码:

img {
max-width:500px;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 500)?”500px”:”auto”}
);
}

解析下其中的几个数字吧。

这里规定了最大尺寸是宽500px,超过500px 则自动等比例缩小到500px

上面这段代码可能在某些浏览器下效果不好,比如存在高度不自动缩放等问题

那么可以试试下面的代码

我们再附上一段代码,对全局都是有效,如果是针对正文内容,在img前加个限制

比如我下面写的,否则可能导致logo等图片变形

.context img{
max-width:500px;
//IE7、FF等其他非IE浏览器下最大宽度为500px;
width:500px;
//所有浏览器中图片的大小为500px;
width:expression(document.body.clientWidth>300?”300px”:”auto”);
//当图片大小大于500px,自动缩小为500px;
overflow:hidden;
}
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|最新更新|网管程序员社区 鄂ICP备11008024号-3

GMT+8, 2019-11-16 06:58 , Processed in 0.078000 second(s), 24 queries .

Powered by 网管论坛

© 2001-2018 www.027safe.com Inc.

快速回复 返回顶部 返回列表