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="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="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="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="350px;height:300px;background-color:Black;">
<img style="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="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>