以上描述不适用于除图片外的其他元素。
随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?
那就利用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
}
解决这个问题的方法如下:
1、先在html里添加一个img图片标签。
2、运行页面后,这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放,可以在css样式里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px。
4、设置后,看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个,比如设置宽度为100px,高度设置为自动就行了。
6、这里设置后的效果,图片并没有变形。
7、同样,如果是限定高度的大小,就设置宽度为自动,图片同样不会变形,这样问题就解决了。