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. linux ascii艺术与ansi艺术

    Linux终端下的ASCII艺术 http://zh.wikipedia.org/zh-tw/%E9%9B%BB%E5%AD%90%E9%81%8A%E6%88%B2%E5%8F%B2 电子游戏史 h ...

  2. shell之脚本片断

    16. 以下是平台信息 CentOS Linux release 7.1.1503 (Core) Linux mysql-dev1 3.10.0-229.el7.x86_64 #1 SMP Fri M ...

  3. HadoopDoctor：来自腾讯数据仓库TDW的MR诊断系统

    TDW是基于Hadoop生态圈研发的大数据处理平台,MapReduce计算引擎在TDW平台中承担了所有的离线数据计算,是TDW最重要的底层支撑平台之一.在TDW 平台中,除了MR程序会生成MapRed ...

  4. VBA実績表

    VBA 插入一行保留样式 VBA 打开一个string指定的文件 VBA 按照文件类型名称打开一个文件 VBA excel中表示列的字母换成数字

  5. Linux环境下vsftpd参数配置

    很久之前就用过vsftpd,但总是忘了参数该如何配置,今天特地有搜索了一遍,把配置方法整理如下: (1)检查是否已安装vsftpd #rpm -qa | grep vsftpd vsftpd--.el ...

  6. 【linux】yum本地源制作

    在/etc/yum.repos.d/ 目录下,有两个文件  CentOS-Base.repo和 CentOS-Media.repo 其中CentOS-Base.repo 记录着网络上的 yum 源的地 ...

  7. (转)用JQuery实现Fix表头表格

    本文转载自:http://www.cnblogs.com/evlon/archive/2009/06/12/1502239.html 我的技术要点: 1.用两个表,其中一个是表头,另一个是表格做表体 ...

  8. android学习笔记21——消息提示Toast

    消息提示可细分为两种:大量消息提示——当程序有大量图片.信息需要展示时,采用对话框消息提示: 小量消息提示——当程序只有少量信息需要呈现给用户时,采用轻量级的对话框——Toast; Toast ==& ...

  9. ARM各种版本号知识以及型号的发展（三星为例）

    1.ARM型号的发展历史 2.单片机.工业上一般使用RTOS(实时操作系统),Linux.Android用在影音娱乐等对实时性要求没那么高的场合: 3.ARM内核版本号和Soc版本号是由ARM确定的, ...

  10. [Debug]驱动程序调测方法与技巧

    转自:http://blog.csdn.net/lichangc/article/details/43272457 驱动程序开发的一个重大难点就是不易调试.本文目的就是介绍驱动开发中常用的几种直接和间 ...