有时前端页面只有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等比例缩放图片的例子，希望对大家有所帮助。
