js等比例缩放图片的实现方法
有时前端页面只有500×500像素的宽和高的布局，但是后台返回的数据图片是1000×1000，那么这种情况下，如果直接返回图片肯定有一部分没有显示出来。
可以考虑在前端开发实现图片等比例缩放，本文介绍用js实现等比例缩放图片的方法。
html代码：
<img src=20140120084827179.jpg" alt="">
</div>
css代码：
外层div的css样式定了宽度是800像素 高度是300像素，但是这张图片的宽度和高度分别是1060像素和300像素，如果不做任何处理的话，那么图片肯定会有260像素被隐藏掉了，想要图片被渲染出来后，根据外层容器800像素×300像素的宽度和高度分别等比例缩放，如此便可以自适应高度与宽度了。
已知图片的宽度和高度的等比例缩放的原理，参考如下：
<div id="demo1">
<img src=20140120084827179.jpg" alt="">
</div>
css代码：
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等比例缩放图片的例子，希望对大家有所帮助。
您可能感兴趣的文章：
js 实现图片等比例缩放实例
js等比例缩放图片示例
js等比例缩放图片的实现方法
js等比例缩小图片尺寸的例子
php按比例计算图片大小的代码
js动态获取图片width与height 等比例缩放的代码
php图片等比例放大与缩小的方法举例
php等比例缩放图片的工具SimpleImage实例学习
等比例缩小图片尺寸的js代码
php图片裁剪与缩略图示例