$(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. Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中,为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。

    https://developer.mozilla.org/zh-CN/docs/Mozilla/Projects/Rhino

  2. Android 下载网络图片保存到本地

    通过网络地址获取网络图片,点击下载将图片显示出来,然后点击图片将图片保存到本地. 首先需要在manifest上添加一些权限: <!-- 访问网络的权限 --> <uses-permi ...

  3. javascript的几个小技巧

    1.在循环中缓存array.length 这个技巧很简单,这个在处理一个很大的数组循环时,对性能影响将是非常大的.基本上,大家都会写一个这样的同步迭代的数组. for(var i=0;i<arr ...

  4. 安装ESXi5.5遇到Relocating modules and starting up the kernel的处理

    在一些Dell较旧的服务器上安装ESXi 5.x时, 会遇到卡在Relocating modules and starting up the kernel过不去的问题. 比如我装的这台CS24VSS. ...

  5. WF4.0 工作流设计器 传入参数问题记录?

    在本公司的流程设计器 ,如果流程中使用了传入参数,应先定义 参数,然后再拖动节点,才能正确提交,否则出错,原因未查明,只观察到现象.

  6. SQL GETDATE()日期格式化函数

    Sql Server 中一个非常强大的日期格式化函数 Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect CONV ...

  7. Linux socket多进程服务器框架三

    在使用select管理服务器连接的时候: 注意1:select是可中断睡眠函数,需要屏蔽信号 注意2:必须获取select的返回值nread,每次处理完一个事件,nread需要-1 注意3:如果客户端 ...

  8. Spring Security笔记:登录尝试次数限制

    今天在前面一节的基础之上,再增加一点新内容,默认情况下Spring Security不会对登录错误的尝试次数做限制,也就是说允许暴力尝试,这显然不够安全,下面的内容将带着大家一起学习如何限制登录尝试次 ...

  9. 简单谈谈dom解析xml和html

    前言 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.html,xml都是基于这个模型构造的.这也是一个W3C推出的标准.j ...

  10. WPF 小技巧

    在使用mvvm模式开发时,对于Command的绑定是一件很伤脑筋的事情,尽管有强大的Blend类库支持: xmlns:Custom="http://www.galasoft.ch/mvvml ...