js脚本按比例缩放图片

    在前端开发过程中 总会遇到UI提供的图片尺寸比例不对的情况  数量比较大的时候处理起来非常的麻烦，这时候可以写一个脚本来批量处理这些图片 具体做法是调整图片容器的尺寸比例 然后让图片刚好填满容器

function ImgPro($imgContainer, w,h) {//imgContainer是图片容器  w，h是要设的比例    var height = $imgContainer.width()/w*h;    $imgContainer.height(height);    var $img = $imgContainer.children('img');    var imgw = $img.width();    var imgh = $img.height();    var horizontal=$imgContainer.width();    //console.log(imgh);        if (imgh < height||imgw < horizontal) {            if (imgw < horizontal) {                $img.width(horizontal);                $img.height(height);                $img.css('max-width', horizontal + 'px');            }else{                $img.height(height);                var width = imgw * height / imgh;                $img.width(width);                $img.css('max-width', width + 'px');            }        }        else{            $img.width(horizontal);            $img.height(height);        }}

运用例子：

        
$(".div-responsive").each(function(){    ImgPro($(this), 3,2);});
$(window).resize(function(){    $(".div-responsive").each(function(){        ImgPro($(this), 3,2);    });  });
//html 代码 class=“img-responsive”是用到了bootstrap的技术栈
<div class="div-responsive">    <img  class="img-responsive" src="@routes.Assets.at("images/hypoloop.jpg")"></div>
//添加div-responsive
没添加div-responsive