问题描述
这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ImageLoad源码
wh) {
img.height = h;
var width = parseInt(nwh * h);
img.width = width;
var left = parseInt((width - w) / 2) * -1;
img.style.marginLeft = left + "px";
} else if (nwh < wh) {
img.height = h;
var width = parseInt(nwh * h);
img.width = width;
var left = parseInt((w - width) / 2);
img.style.marginLeft = left + "px";
} else {
img.height = h;
img.width = w;
}
},//原始宽度 原始高度 容器宽度 容器高度
//保证宽度一致
resetImgSizeW : function(img,//原始宽度 原始高度 容器宽度 容器高度
//铺满全屏
resetImgSizeWH : function(img,//获取图片真实尺寸以及容器尺寸
setImgSize : function(img,img.height);
}
}
},}
以上所述是小编给大家介绍的使用JavaScript解决网页图片拉伸问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。