html5图片缩放居中原理 html css 图片缩放等居中显示代码

$(document).ready(function () {

var maxWidth = document.documentElement.clientWidth; // 图片最大宽度

var maxHeight = document.documentElement.clientHeight; // 图片最大高度

$(".div_main").css("height", maxHeight * 0.25);

//$(".img").css("height", maxHeight * 0.33);

$(".temp").load(function () {

var maxWidth = document.documentElement.clientWidth * 0.35-5; // 图片最大宽度 \

var maxHeight = document.documentElement.clientHeight * 0.29 * 0.7-12;

var imgheigt = this.clientHeight;

var imgwidth = this.clientWidth;

var rate = imgheigt / imgwidth;

var maxrate = maxHeight / maxWidth;

if (maxrate > rate) {

var heirate = maxHeight / imgheigt;

var fandaimgwith = imgwidth * heirate;

$(this).css("width", fandaimgwith);

$(this).css("height", maxHeight);

var yidong = (fandaimgwith - maxWidth) / 2;

var imgwith = yidong + maxWidth;

$(this).css("clip", "rect(0px," + imgwith + "px," + maxHeight + "px," + yidong + "px)");

$(this).css("margin-left", "-" + yidong + "px");

}

else {

var widthrate = maxWidth / imgwidth

var fandaimgheight = imgheigt * widthrate;

$(this).css("height", fandaimgheight);

$(this).css("width", maxWidth);

var yidong = (fandaimgheight - maxHeight) / 2;

var imheight = yidong + maxHeight;

$(this).css("clip", "rect(" + yidong + "px," + maxWidth + "px," + imheight + "px,0px)");

$(this).css("margin-top", "-" + yidong + "px");

}

});

});

全屏显示