加入收藏 | 网站地图 | | RSS | WAP
你好,游客 登录 注册 搜索
背景:
阅读内容  领跑条码、标签打印软件 | 来电弹出客户资料

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

[日期:2014-01-20] 作者: 来源: [字体: ]

网站更新时经常遇到图片尺寸大于页面容器尺寸的情况。通常我们需要将其缩放至适当大小。但是有时候并不理想,比如缩放导致的图片拉伸、压缩等变形,造成图片超级难看。今天我们就用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");
 });

缩放的原理逻辑图

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

关键词:缩放  比例  图片 

收藏 推荐 打印 | 录入:blue1000 | 阅读:
本文评论   查看全部评论 (2)
表情: 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事/刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
第 2 楼
* 匿名 发表于 2016/12/25 12:58:56
http://www.blue1000.com/bkhtml/c123/2010-01/66652.htm 2016年会计年终工作总结 http://www.135995.com/show/11605.html 2016年行政前台年终总结 http://www.135995.com/show/11598.html
第 1 楼
* 匿名 发表于 2016/12/24 12:57:01
http://www.blue1000.com/bkhtml/c123/2010-01/66652.htm 军训感悟作文 http://www.135995.com/details/zs599.html 父爱的作文 http://www.135995.com/details/zs211.html