js等比例缩放图片的实现方法

发布时间:2019-07-18编辑:脚本学堂
本文介绍了js实现等比例缩放图片的方法,如何将图片用js等比例缩放,js等比例缩小或等比例放大图片时的注意事项,有需要的朋友参考下。

有时前端页面只有500×500像素的宽和高的布局,但是后台返回的数据图片是1000×1000,那么这种情况下,如果直接返回图片肯定有一部分没有显示出来。
可以考虑在前端开发实现图片等比例缩放,本文介绍用js实现等比例缩放图片的方法

html代码:
 

复制代码 代码示例:
<div id="demo1">
    <img src=20140120084827179.jpg" alt="">
</div>

css代码:
 

复制代码 代码示例:
#demo1{width:800px;height:300px;overflow:hidden;}

外层div的css样式定了宽度是800像素 高度是300像素,但是这张图片的宽度和高度分别是1060像素和300像素,如果不做任何处理的话,那么图片肯定会有260像素被隐藏掉了,想要图片被渲染出来后,根据外层容器800像素×300像素的宽度和高度分别等比例缩放,如此便可以自适应高度与宽度了。
 
已知图片的宽度和高度的等比例缩放的原理,参考如下:
 

复制代码 代码示例:
<img src=20140120084827179.jpg" width="1060" height="300" alt="">
<div id="demo1">
    <img src=20140120084827179.jpg" alt="">
</div>

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实现图片等比例缩放的方法,一些js等比例缩放图片的例子,希望对大家有所帮助。