Jquery或者js做一个图片根据浏览器自适应，并且等比例，真心求教!!!

Question

http://photo.163.com/david928928/train/28001/不管是宽还是高减少图片都是等比例的，我弄了只有宽减少是等比例的，高我就弄不出来了，真心求教

Answer 1

var oW,oH; //图片的真实宽高(大于 imgW,imgH)
var imgW,imgH  ; //等比压缩的宽高
if(oW>=oH && ow >imgW ) // 
{
img.style.width=imgW+"px";
imgH = Math.round(oH * (imgW/oW)); // 等比计算高度
img.style.height=imgH+"px";
}else if(oW<oH && oH >imgH)
{
 imgW = Math.round(oW * (imgH/oH));// 等比计算宽度
 img.style.height=imgH+"px";
 img.style.width=imgW+"px";
}

Answer 2

var img=document.getElementById("大层id");
window.onresize=function(){
img.height=document.body.clientHeight+"px";
img.width=document.body.clientWidth+"px";
}window.onload=function()
{
img.height=document.body.clientHeight+"px";
img.width=document.body.clientWidth+"px";
}

Answer 3

等比压缩就是，假设你现在图片的高宽分别是h，w
容器的分别是h1,w1
如果 h1/w1 > h/w 说明容器的高宽比 比 图片的高宽比 大，所以无论图片放大还是缩小，都依赖于高度最大化的缩放率。所以图片的真实高度就是 h = h1; w = w*(h1/h);反之亦然

Answer 4

/**
 * 图片自动缩放函数
 * @image: 要改变大小的图片
 * @width: 图片的最大宽度
 * @height: 图片的最大高度
 * @desc: 当图片的宽高任一个大于参数里设置的值的时候，图片就会等比例缩小，且位置相对于外面的容器左右居中
 */
var SetImageAuto = {};// 设置居中
function SetMiddle(image, height) { /// <summary>重设图片大小后让图片相对于DIV居中</summary> 
    if (typeof(image) == 'string') image = document.images[image] || document.getElementById(image);
    var div = image.parentNode;
    if (div.nodeName != "DIV") {
        div = div.parentNode;
    }
    if (image.height > 0 && image.height < height) {
        var marginTopVal = (height - image.height) / 2;
        image.style.marginTop = parseInt(marginTopVal) + "px"; ///不加px,在火狐下不支持！ 
    } else {
        image.height = height;
        image.style.marginTop = "0px";
    }
}// 重设大小
SetImageAuto.Resize1 = function(image, width, height) {
    if (width == null || height == null) return;
    image.removeAttribute('width');
    image.removeAttribute('height');
    var w = image.width,
    h = image.height;
    var scalingW = w / width,
    scalingH = h / height;
    var scaling = w / h;
    if (scalingW >= scalingH) {
        image.width = width;
        image.height = width / scaling;
    } else {
        image.height = height;
        image.width = height * scaling;
    }
}
function imgReSize(imgObj, w, h) {
 SetImageAuto.Resize1(imgObj, w, h);
    SetMiddle(imgObj, h);
}// 调用：<img onload="imgReSize(this, 40, 40)" /> 

Answer 5

function imgReSize(imgObj, w, h) {
 SetImageAuto.Resize1(imgObj, w, h);
    SetMiddle(imgObj, h);
}// 调用：<img onload="imgReSize(this, 40, 40)" /> 40是给它的宽高？我不可以定义它的宽高，而且我弄了效果没出来，

Answer 6

你先记录下图片的原高和原宽的值oHeight、oWidth。还得算出浏览器的长宽，根据你确定现在图片的宽度iWidth，算出i=oWidth/iWidth,利用i算出现高就行了

Answer 7

请问下，按照兄台的思路成功了制作了等比例，但是新的问题又出来了，貌似兄台的判断不够精准。
比如我ow=220;oh=180,imgw=220,imgh=130;这个条件我既不符合第一个if又不符合第二个if，怎么处理？新建一个if来处理吗？

Answer 8

请问下，按照兄台的思路成功了制作了等比例，但是新的问题又出来了，貌似兄台的判断不够精准。
比如我ow=200;oh=180,imgw=220,imgh=130;这个条件我既不符合第一个if又不符合第二个if，怎么处理？新建一个if来处理吗？ 

Answer 9

还有这样的写法貌似google浏览器，360极速，搜狗高速模式都不支持。