这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢?
那就利用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
}
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:span {font-size: 0.8em}。
3、浏览器运行index.html页面,此时span的字体大小被设置h1字体大小的80%。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>测试页面</title>
<style type="text/css">
div {
width: 600px
text-align: center
font-size: 4em
color: #333
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
$(window).resize(function() {
var r = document.body.offsetWidth / window.screen.availWidth
$(document.body).css("-webkit-transform","scale(" + r + ")")
})
</script>
</head>
<body>
<div>改变窗口大小试试,你会发现什么?</div>
</body>
</html>