1资料的排版

2.html代码

 <body>

 <div class="BB"><img src="dw.jpg"  alt="动物" onload="setPic($(this))"/></div>

 <div class="BB"><img src="dw1.jpg"  alt="动物" onload="setPic($(this))"/></div>

 <div class="BB"><img src="yy.jpg" alt="人" onload="setPic($(this))" /></div>

 </body>

3.css代码

<style type="text/css">

    .BB{ width:100px; height:80px; border:1px solid red; overflow:hidden; margin-top:10px; float:left; margin-left:10px; text-align:center; line-height:100px; position:relative;}

    img{position:relative;}

    </style>

4.js代码

<script src="jquery-1.7.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        var BNImg = {

            iconW: 100,

            iconH: 80,

            getOriginPicWandH: function (imgObj) {

                return { width: imgObj.width(), height: imgObj.heght() };

            },

            setPicWandH: function (imgObj) {

                var originW = imgObj.width();

                var originH = imgObj.height();

                var maxWorH = originW >= originH ? { w: originW} : { h: originH };

                var originRate = originW / originH;

                if (maxWorH.w) {

                    imgObj.width(BNImg.iconW);

                    var newH = BNImg.iconW / originRate

                    imgObj.height(newH);

                    var top = (BNImg.iconH - newH) / 2;

                    imgObj.css("top",top+"px");

                }

                else if (maxWorH.h) {

                    imgObj.height(BNImg.iconH);

                    imgObj.width(originRate * BNImg.iconH);

                }

            }

        };

        function setPic(obj) {

            BNImg.setPicWandH(obj);

         }

jQuery制作图片的等比例缩放的更多相关文章

  1. js实现图片的等比例缩放

      js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...

  2. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  3. android项目 之 记事本（12） ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  4. Qt图片按原比例缩放

    1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...

  5. java读取jpg图片旋转按比例缩放

    //入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...

  6. js 完成对图片的等比例缩放的方法

    /* 重新按比例设置 页面上对应图片的长和高, */ function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { var wid ...

  7. PHP对图片按照一定比例缩放并生成图片文件

    list($width, $height)=getimagesize($filename);//缩放比例$per=round(400/$width,3); $n_w=$width*$per;$n_h= ...

  8. iOS 网络/本地 图片 按自定义比例缩放 不失真 方法

    我尝试了很多种方法,终于,设计了一个方法,能按自己规定的大小压缩 还没失真 如果以后不好用 我再升级 分享给大家: + (CGRect )scaleImage:(UIImage *)image toS ...

  9. jquery制作图片瀑布流点击按钮加载更多内容

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> ...

随机推荐

  1. bash feature

    bash调用-启动文件-交互式shell-条件表达式-shell算术-别名-数组-目录栈-提示符控制-受限shell-posix模式 受限shell bash --restricted 它用来建立一个 ...

  2. 09_android入门_采用android-async-http开源项目的GET方式或POST方式实现登陆案例

    根据08_android入门_android-async-http开源项目介绍及使用方法的介绍,我们通过最常见的登陆案例进行介绍android-async-http开源项目中有关类的使用.希望对你学习 ...

  3. JavaScript理解

    Javascript,是从类型(type)开始,这些类型在JS中分为两大类:原生类型与对象类型.原生类型包括:number,string, boolean, null, undefined:剩下的非原 ...

  4. lambda 的使用汇总

    d=lambda x:x+1print(d(10))lambda 相当于一个轻量函数返回 d=lambda x:x+1 if x>0 else "error"print(d( ...

  5. 决策树模型组合之（在线）随机森林与GBDT

    前言: 决策树这种算法有着很多良好的特性,比如说训练时间复杂度较低,预测的过程比较快速,模型容易展示(容易将得到的决策树做成图片展示出来)等.但是同时, 单决策树又有一些不好的地方,比如说容易over ...

  6. HBase(六): HBase体系结构剖析（上)

    HBase隶属于hadoop生态系统,它参考了谷歌的BigTable建模,实现的编程语言为 Java, 建立在hdfs之上,提供高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.它仅能通过主键( ...

  7. 程序员书单_J2EE专题

    Enterprise JavaBeans 3.0中文版(第5版) http://download.csdn.net/detail/shenzhq1980/9104015 J2EE设计模式 http:/ ...

  8. Redis-sentinel监控

    Sentinel介绍 Redis的 Sentinel 系统用于管理多个Redis服务器, 该系统执行以下三个任务: 监控(Monitoring) 提醒(Notification) 自动故障迁移(Aut ...

  9. LVS包转发模型和调度算法(转)

    LVS简介 Internet的快速增长使多媒体网络服务器面对的访问数量快速增加,服务器需要具备提供大量并发访问服务的能力,因此对于大负载的服务器来 讲, CPU.I/O处理能力很快会成为瓶颈.由于单台 ...

  10. xss攻击和sq注入

    xss攻击跟SQL注入的原理还是挺简单的,都是利用web是使用字符串进行操作的原理,通过伪造分隔符或者结束符号,来让网页或者服务端来运行输入的代码 一般防御的方法就是在对一些分隔符进行转义,djang ...