脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS实现等比例缩放图片，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 有时候我们前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下 如果我直接返回的话 那么图片肯定有一部分没有显示出来，在这种情况下我是想能不能在我们前端开发实现图片等比例缩放。比如如下HTML代码：

 

<p id="demo1"> 

    <img src=/uploaDFile/2014/0120/20140120084827179.jpg" alt=""> 

</p> 

CSS代码如下：

 

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

外层p的css样式定了宽度是800像素 高度是300像素，但是这张图片的宽度和高度分别是1060像素和300像素，如果我们不做任何处理的话，那么图片肯定会有260像素被隐藏掉了，而我们现在想要图片被渲染出来后 根据外层容器800像素×300像素的宽度和高度分别等比例缩放，这样的话 不管图片的宽度和高度是多少，都可以自适应！

 

下面我们可以先看看JSFIddle效果是什么样的！第一张图片是没有任何处理的，第2张小的是根据宽度800像素进行等比例缩放后的。

 

想要看效果，请轻轻点击我！

 

已知图片的宽度和高度的等比例缩放的原理是：

 

 

HTML代码如下：

 

<img src=/uploadfile/2014/0120/20140120084827179.jpg" width="1060" height="300" alt=""> 

<p id="demo1"> 

    <img src=/uploadfile/2014/0120/20140120084827179.jpg" alt=""> 

</p>

CSS代码如下：

 

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

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");

 });

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS实现等比例缩放图片全部内容，希望文章能够帮你解决javascript代码实例教程-JS实现等比例缩放图片所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。