图片等比例压缩
最近在做一个类似于相框的东西

但是相框的宽度和高度是不固定的

所以，希望相框中的图片等比例压缩。

按照宽度等比例显示，按照高度等比例显示

求大神，支招

就还100分，敬上
[解决办法]
function proDownImage(path,imgObj) { // 等比压缩图片工具
//var proMaxHeight = 185;
var proMaxHeight=300;
var proMaxWidth = 175;
var size = {};　
var image = new Image();　

image.onload=
function() { // 当加载状态改变时执行此方法,因为img的加载有延迟
if (image.readyState == "complete") { // 当加载状态为完全结束时进入
if (image.width > 0 && image.height > 0) {
var ww = proMaxWidth / image.width;
var hh = proMaxHeight / image.height;　
var rate = (ww < hh) ? ww: hh;
if (rate <= 1) {　
alert("imgage width*rate is:" + image.width * rate);
size.width = image.width * rate;
size.height = image.height * rate;
} else {
alert("imgage width is:" + image.width);　　
size.width = image.width;　　
size.height = image.height;　　　
}　
}
}
imgObj.style.width=size.width+"px";
imgObj.style.height=size.height+"px";
};
image.src = path;　
}
[解决办法]
设置max-width或者max-height试试 这个好像设置了高或宽会自己等比变化吧？
[解决办法]
3楼正解
img 里 设置max-width:100% 和 max-height: 100%
[解决办法]
LZ可以试试看下面这段：

var resize = function(img, maxh, maxw) {
    var ratio = maxh/maxw;
    if (img.height/img.width > ratio){
        // height is the problem
        if (img.height > maxh){
            img.width = Math.round(img.width(maxh/img.height));
            img.height = maxh;
        } 
 
    } else { // width is the problem
        if (img.width > maxh){
            img.height = Math.round(img.height(maxw/img.width));
            img.width = maxw;
        }
    }
};

[解决办法]
之前写过一个方法：生成等比缩放图片的 ，这是使用框架自带的。   
思路：
/**
     * 使用imagick 等比缩放图片
     * @param string $source_img  源图片地址
     * @param int $width   缩放后图片宽度
     * @param int $height  缩放后图片高度
     * @param string $target_img  缩放后图片地址
     * @return String 图片路径
     */
    public function thumbScaleImage($source_img, $width, $height, $target_img = '', $flag_source = false) {
        $result = $this->imagick->readImage($source_img);
        if (!$result) {
            return false;
        }
        $srcWH = $this->imagick->getImageGeometry();
        if ($srcWH['width'] > $width 
[解决办法]
 false === $flag_source) {
            $srcW['width'] = $width;
            $srcH['height'] = ceil($srcW['width'] / $srcWH['width'] * $srcWH['height']);
        } else {
            $srcW['width'] = $srcWH['width'];
            $srcH['height'] = ceil($srcWH['height']);
        }
        if (!empty($srcW['width']) && !empty($srcH['height'])) {
            $this->imagick->thumbnailImage($srcW['width'], $srcH['height'], true);
            $ext = strtolower($this->imagick->getImageFormat());
            $ext = ($ext == 'jpeg') ? 'jpg' : $ext;
            $new_img = new Imagick();
            $new_img->newImage($srcW['width'], $srcH['height'], new ImagickPixel("#FFFFFF"), $ext);
            if ($ext == 'png') { 
 
                $new_img->setImageOpacity(0);
            }

            $new_img->compositeImage($this->imagick, imagick::COMPOSITE_OVER, 0, 0);

            if (empty($target_img)) {
                $typeNum = $this->getTypePos($source_img);
                $imgBaseUrl = substr($source_img, 0, $typeNum);
                $target_img = $imgBaseUrl . "_" . $srcW['width'] . "_" . $srcH['height'] . "." . $ext;
            }

            $new_img->setImageFileName($target_img);
            $new_img->writeImage();
            $new_img->clear();
            return $target_img;
        } else {
            //var_dump($source_img);
            //var_dump($srcW['width']);
            //var_dump($srcH['height']);
            return $source_img;
        }
    }