控制手机网站图片大小的简单代码 |
作者:shenghuobaodian.com 时间:2021-01-18 |
描述:我们制作网站的时候,一般地,是在电脑端维护和更新内容,在主站更新的时候,会同步生成可在手机端访问的另一个子站,这时候,内容页里的图片会超出手机正常观看的屏幕,影响用户浏览。 |
《生活宝典shenghuobaodian.com》讯 我们制作网站的时候,一般地,是在电脑端维护和更新内容,在主站更新的时候,会同步生成可在手机端访问的另一个子站,这时候,内容页里的图片会超出手机正常观看的屏幕,影响用户浏览。
请把下面这段代码加在网页源代码头部的<head></head>里面即可:
<STYLE type=text/css> img {max-width: 307px; zoom:expression( function(elm) { if (elm.width>307) { var oldVW = elm.width; elm.width=307; elm.height = elm.height*(307 /oldVW); } elm.style.zoom = '1'; }(this));} </STYLE>
这里是以307的大小为例,适合于绝大部分手机用户,超过307的,都按307等比例缩放。内容页图片等比例缩放,用CSS控制图片适应大小。这样比用js调用更简单且确保效果。(若按照上面添加后不能控制图片大小的话,那么注意在网站主端上传图片的时候,去掉宽和高的数值,点确定,最终完成上传图片,就可以了。应该是,这样显示出来接近于等比例缩放,否则图片高度与宽度不成比例。)
文章来源:shenghuobaodian.com 从手机浏览器访问《生活宝典》 |
|