js控制html页面显示图片方式，只需要引入“jquery-1.11.2.min.js”
js：
/*
引用
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="showImage.js" type="text/javascript"></script>
<script>
$(function () {
showImage.init({Div:"div.showImage"});
}); </script>
外层div建议设置宽高，div默认宽度为父级宽度,但高度未知
<div class="showImage" style="width:350px;height:300px;background-color:Black;">
<img style="" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
</div>
*/
var showImage = {
item: {
Div: "div.showImage", //获取外层div的选择器
Img: "img:eq(0)", //从div子元素 获取图片的选择器
isCenter: true, //是否居中
showBeyond: false, //是否显示超出部分
fixedWH: "delfault", /*固定宽或高:
"delfault"大图图片小边，小图固定图片大边，宽图高图不变大小
"abs"取宽高差值最小固定。
"width"固定宽。
"height" 固定高。*/
full: false//小图放大充满 外层div },
init: function (item) {
showImage.item = $.extend({}, showImage.item, item); var d = $(showImage.item.Div);
if (d.length > 0) { for (var i = 0; i < d.length; i++) {
showImage.showImage(d[i]);
}
} else {
showImage.showImage(d[0]);
}
},
showImage: function (obj, width, height) {
if (obj == undefined) {
return;
}
//obj:外层div对象
obj = $(obj);
//超出外层div部分不显示
if (!showImage.item.showBeyond) {
obj.css("overflow", "hidden");
}
//清除外层div样式，对图片定位样式
obj.css("padding", "0px 0px 0px 0px"); //获取div大小
if (!width) {
width = obj.get(0).offsetWidth;
}
if (!height) {
height = obj.get(0).offsetHeight;
}
if (height <= 0 && width <= 0) {
return;
}
//获取图片
var img = obj.children(showImage.item.Img).get(0); //设置图片大小，位置 //图片加载完成
if (img.complete) {
showImage.LocationImg(img, width, height);
} else {
//图片未加载
img.onload = function () { showImage.LocationImg(img, width, height); };
} },
LocationImg: function (img, width, height) {
img = $(img);
var img2 = new Image();
img2.src = img.get(0).src; //设置图片大小
//获取图片宽高
var imgheight = img2.height;
var imgwidth = img2.width; // var imgheight = img.get(0).offsetHeight;
// var imgwidth = img.get(0).offsetWidth;
// var imgwidth = img.get(0).naturalWidth;
// var imgheight = img.get(0).naturalHeight;
if (!img.complete) {
// 图片标签尚未加载
setTimeout(function () {
//设置图片显示
showImage.LocationImg(img, width, height);
}, 1000);
return;
}
//height 外层div高， width 外层div宽
width = parseFloat(width);
height = parseFloat(height);
imgwidth = parseFloat(imgwidth);
imgheight = parseFloat(imgheight); if (width == 0) {
width = imgwidth;
}
if (height == 0) {
height = imgheight;
}
//固定宽或高，另一边等比缩放
if (showImage.item.fixedWH == "width") {
//等比缩放高
imgheight = imgheight * (width / imgwidth);
//固定宽
imgwidth = width;
} else if (showImage.item.fixedWH == "height") {
//等比缩放宽
imgwidth = imgwidth * (height / imgheight);
//固定高
imgheight = height;
} else if (showImage.item.fixedWH == "delfault") {
//大图图片小边，小图固定图片大边，宽图高图不变大小
if (imgheight >= height && imgwidth >= width) {
//大图充满
if (imgheight * (width / imgwidth) >= height) {
//等比缩放高
imgheight = imgheight * (width / imgwidth);
//固定宽
imgwidth = width;
} else {
//等比缩放宽
imgwidth = imgwidth * (height / imgheight);
//固定高
imgheight = height;
}
} else if (imgheight < height && imgwidth < width) {
//小图
if (imgwidth < imgheight) {
//等比缩放宽
imgwidth = imgwidth * (height / imgheight);
//固定高
imgheight = height;
} else if (imgwidth == imgheight) {
if (height > width) {
//等比缩放高
imgheight = imgheight * (width / imgwidth);
//固定宽
imgwidth = width;
} else {
//等比缩放宽
imgwidth = imgwidth * (height / imgheight);
//固定高
imgheight = height;
}
} else {
//等比缩放高
imgheight = imgheight * (width / imgwidth);
//固定宽
imgwidth = width;
}
} else {
//高图或宽图
//不变大小，留白
}
} else if (showImage.item.fixedWH == "abs") {
//宽差值，高差值比较
if (Math.abs(height - imgheight) > Math.abs(width - imgwidth)) {
//等比缩放高
imgheight = imgheight * (width / imgwidth);
//固定宽
imgwidth = width;
} else {
//等比缩放宽
imgwidth = imgwidth * (height / imgheight);
//固定高
imgheight = height;
}
}
//充满
if (showImage.item.full) {
if (imgheight == height && imgwidth < width) {
//使宽充满
imgwidth = width * (width / imgwidth);
imgheight = width; } else if (imgheight < height && imgwidth == width) {
//使高充满
imgwidth = imgwidth * (height / imgheight);
imgheight = height; } }
//设置图片宽高
img.css("height", (100 * imgheight / height) + "%");
img.css("width", (100 * imgwidth / width) + "%"); //图片定位样式
img.css("float", "left");
img.css("position", "relative");
img.css("bottom", "0px");
img.css("right", "0px");
img.css("margin", "0px 0px 0px 0px");
img.css("padding", "0px 0px 0px 0px"); if (showImage.item.isCenter) {
//定位居中
var toppx = (((100 * (Math.abs(height - imgheight)) / height)) / 2).toFixed(2) + "%";
var leftpx = (((100 * (Math.abs(imgwidth - width)) / width)) / 2).toFixed(2) + "%"; if (imgwidth > width) {
leftpx = "-" + leftpx;
}
if (imgheight > height) {
toppx = "-" + toppx;
}
img.css("left", leftpx);
img.css("top", toppx);
} } //设置图片大小, 位置
};
html：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="showImage.js" type="text/javascript"></script>
<script>
$(function () {
showImage.init({ Div: "div.showImage" });
});
</script> </head>
<body>
<form id="form1" runat="server" style="padding-left:100px;">
长图
<br />
<div class="showImage" style="width:100px;height:100px;background-color:Black;">
<img style="" src="https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"></img>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
长图原图
<br />
<img style="" src="https://test2015data.oss-cn-hangzhou.aliyuncs.com/image-hroot/year20173/image-201730/news/file_170328203053104559.png"></img>
<br />
<br />
高图
<br />
<div class="showImage" style="width:350px;height:300px; background-color:Black;">
<img style="position:inherit;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"></img> </div>
<br />
高图原图
<br />
<img style="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490965812249&di=7ec87be2d7b63733a7bba492e952202e&imgtype=0&src=http%3A%2F%2Fwww.shuhua365.com%2Fhualang%2Fuploadfile%2F2010312112959216.jpg"></img> </form>
</body>
<form id="form1" style="padding-left:100px;">
大图
<br />
<div class="showImage" style="width:350px;height:300px;background-color:Black;">
<img style="width:200px;height:200px;" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
大图原图
<br />
<img style="" src="http://photocdn.sohu.com/20170328/Img485277054.jpg"></img>
<br />
<br />
小图
<br />
<div class="showImage" style="width:350px;height:300px; background-color:Black;">
<img style="position:inherit;" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=512897042,748871735&fm=80&w=179&h=119&img.JPEG"></img> </div>
<br />
小图原图
<br />
<img style="" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=512897042,748871735&fm=80&w=179&h=119&img.JPEG"></img> </form>
</body>
</html>