问题描述
这段时间在做PM的需求的时候突然发现一个问题，产品上的图片来自多个第三方，具体的尺寸无法确定，如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象，十分影响产品的美观，因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。
rush:js;">
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ImageLoad源码
rush:js;">
$(document).ready(function() {
new ImageLoad();
});
ImageLoad = function(){
this.init();
};
ImageLoad.prototype = {
init : function () {
// this.initImg("w");
},initImg : function(type) {
var _this = this;
var imgs = document.getElementsByTagName('img');
for (var i=0; i 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 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
