javascript实现图片的按比例缩放显示

网站更新时经常遇到图片尺寸大于页面容器尺寸的情况。通常我们需要将其缩放至适当大小。但是有时候并不理想，比如缩放导致的图片拉伸、压缩等变形，造成图片超级难看。今天我们就用JavaScript来自动完成图片按比例缩放工作，让图片既可以缩放，而且不变形。

HTML代码：

<div id="demo1">
    <img src="http://www.blue1000.com/upload/2014-01/140117101136771.jpg" alt="">
</div>

CSS代码：

#demo1{width:800px;height:300px;overflow:hidden;}

JavaScript代码、JS代码：

/**
 * 已知图片的宽度和高度的等比例缩放
 */

 function knowImgSize(id) {
    var idWidth = $(id).width(),  // 容器的宽度和高度
        idHeight = $(id).height();

    $(id + ' img').each(function(index,img){
        var img_w = $(this).width(),
            img_h = $(this).height();

        // 如果图片自身宽度大于容器的宽度的话 那么高度等比例缩放
        if(img_w > idWidth) {
           
            var height = img_h * idWidth / img_w;
            $(this).css({"width":idWidth, "height":height});
        }
    });

 }

 // 初始化
 $(function(){
    knowImgSize("#demo1");
 });

缩放的原理逻辑图：

以上代码可以举一反三、灵活使用，让你的网页变得更人性化。

关键词：缩放  比例  图片