$(function(){

    $('.img-box img').load(function(){
var w = $(this).width();
var h =$(this).height();
if (w < h){
$(this).css('height','100%');
var boxw =$('.img-box ').width();
var $margin = $('.img-box ').width() - $(this).width();
$(this).css('margin-left',$margin / 2);
}
else if(h < w){
$(this).css('width','100%');
var boxh =$('.img-box ').height();
var $margin = $('.img-box ').height() - $(this).height();
$(this).css('margin-top',$margin / 2);
}
else {
$(this).css('width','100%').css('height','100%');
} });
});

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

  1. jQuery实现等比例缩放大图片

      在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们 ...

  2. jQuery实现等比例缩放大图片让大图片自适应页面布局

    通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种 ...

  3. JQuery 图片延迟加载并等比缩放插件

    原文地址:http://www.shangxueba.com/jingyan/1909987.html DEMO地址:http://demo.jb51.net/html/jquery_img/jque ...

  4. [jquery] 图片热区随图片大小自由缩放

    在图片上直接画出带超级链接热区元素map和area相信大家并不陌生,Dreamweaver等网页制作软件都有直接在图片上绘制带超级链接的热区工具,但是直接绘制的热区是不能随着图片自适应放大和缩小的,现 ...

  5. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  6. Croppic – 免费开源的 jQuery 图片裁剪插件

    Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要.只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能.因为使用了 HTML5 FormData  对 ...

  7. 不容错过的七个jQuery图片滑块插件

    1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这 ...

  8. jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

    前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化, ...

  9. 5 款最新的 jQuery 图片裁剪插件

    这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁剪功能. Cropit Cropit 是一个 jQuery 插件,支持图像裁剪和缩放功能.Cropit ...

随机推荐

  1. NOIP2011多项式系数[快速幂|组合数|逆元]

    题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别为 a ,b ,k , ...

  2. java变量的初始化

    public class Init { private int age;//非静态初始化语句<3> private static String name; //静态初始化语句,先初始化静态 ...

  3. luogu1207双重回文数[usaco1.2]Dual Palindromes

    题目描述 如果一个数从左往右读和从右往左读都是一样,那么这个数就叫做“回文数”.例如,12321就是一个回文数,而77778就不是.当然,回文数的首和尾都应是非零的,因此0220就不是回文数. 事实上 ...

  4. java list

    List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3,角标2上也可以有个3)因为该集合体系有索引 ArrayList:底层的数据结构使用的是数组结构(数组长度是可变 ...

  5. js数组操作

    用 js有很久了,但都没有深究过js的数组形式.偶尔用用也就是简单的string.split(char).这段时间做的一个项目,用到数组的地方很多, 自以为js高手的自己居然无从下手,一下狠心,我学! ...

  6. JAZZ

    今天知道公司中的JAZZ是变形金刚中的“爵士”,如果写内部代码,就好像在操作“爵士”,还是蛮有意思的.先是接触了jQuery,然后是jQuery-ui,然后jazz,继续中...... JAZZ: 爵 ...

  7. three.js 之旅 (三)

    复制自:http://www.cnblogs.com/ssrsblogs/p/5611332.html 创建模型: 1.长方体: THREE.CubeGeometry(width, height, d ...

  8. PAT 1016. 部分A+B (15)

    正整数A的"DA(为1位整数)部分"定义为由A中所有DA组成的新整数PA.例如:给定A = 3862767,DA = 6,则A的"6部分"PA是66,因为A中有 ...

  9. Asp.net NVelocity 模版引擎

    NVelocity.dll是Java中常用的一个模版,下面是常用的模版引擎 1,返回string类型的html代码 /// <summary> /// 获取html模版 /// </ ...

  10. 搜索引擎关键词劫持之asp篇

    摘要:关键词劫持(黑帽seo)其实原理很简单:搜索引擎关键词劫持的过程实际上就是,修改肉鸡站点(webshell站点)A的首页(希望被搜索引擎收录的页面,一般情况下是首页),使之做出判断... 黑帽S ...