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. 【转】PHP 之 CURL 模拟登陆并获取数据

    1.CURL模拟登陆的流程和步骤2.tempnam 创建一个临时文件3.使用CURL模拟登陆到PHP100论坛 <?php$cookie_file = tempnam('./temp','coo ...

  2. python escape sequences

    转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \' 单引号 \" 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \ ...

  3. 非ROOT用户启动Tomcat

    [root@Z ~]# adduser tomcat [root@Z ~]# chown -R tomcat:tomcat /usr/local/tomcat/ [root@Z ~]# chown - ...

  4. 搜索关注点--2014年的google关注点

    补充: 网站知名网站收录 网站被世界三大知名网站DMOZ,Yahoo和Looksmart收录 众所周知,Google的Pagerank系统对那些门户网络目录如 DMOZ,Yahoo和Looksmart ...

  5. wap图片滚动特效_无css3 元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上 ...

  6. ubuntu设置环境变量

    sudo gedit /etc/environment path结尾处追加 路径,如::/opt/EmbedSky/4.3.3/bin source /etc/environment,或者重启电脑?? ...

  7. OC—设计模式-通知的使用

    通知 通知(广播) 可以一对多的发送通知(一个发送者 多个观察者) 特别注意:在发送者 发送通知的时候,必须有观察者 发送者,就是注册一个通知中心,以他为中心,发送消息 通过通知的名字,来判断是哪个通 ...

  8. 借助HTML分别禁用IE8, IE9的兼容视图模式的小技巧

    IE 添加了兼容模式,开启后会以低一版本的 IE 进行渲染,但是我就遇到了一种情况,在 IE8 下只有不使用兼容模式页面才能显示正常,下面有个不错的方法可以解决这个问题 从 IE 8 开始,IE 添加 ...

  9. 103. Binary Tree Zigzag Level Order Traversal

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  10. c++中字符串处理函数

    c++11中提供了to_string函数,定义在string中, 重载了一大片, std::string to_string( int value ); () (since C++) std::str ...