文章内容
2017/6/9 17:05:52,作 者: 黄兵
JS根据屏幕尺寸缩放图片
在响应式设计里面，图面处理是一个重点问题，一般采用不同尺寸屏幕做不同尺寸图片。
有的时候觉得麻烦有没有这个必要，把图片直接写在Background里面要考虑缩放问题，下面这个JS根据屏幕尺寸和图片尺寸缩放。
代码如下：
window.onload=function () {
commFunc();
}
window.onresize=function () {
commFunc();
}
function getWidth() {
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return function changeWidth() {
return pageWidth;
}
}
function commFunc() {
var fun=getWidth();
var wrap=document.getElementsByTagName('header');
//1549是图片的高度
var scaleHeight=fun()/750*1549;
//控制最大750px宽度
if(scaleHeight>1549){
wrap[0].style.cssText='height:1549px';
}else{
wrap[0].style.cssText='transform-origin:center 0px 0px;height:'+scaleHeight+'px';
}
}
首先获取的是屏幕高度宽度，图片宽度/屏幕宽度=缩放率，之后在乘以图片高度，换算为缩放后的图片高度。
黄兵的个人博客原创。
转载请注明出处：黄兵的个人博客 - JS根据屏幕尺寸缩放图片
评论列表