$(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. 第9章 用内核对象进行线程同步(4)_死锁(DeadLock)及其他

    9.7 线程同步对象速查表 对象 何时处于未触发状态 何时处于触发状态 成功等待的副作用 进程 进程仍在运行的时候 进程终止的时(ExitProcess.TerminateProcess) 没有 线程 ...

  2. Unity4.3 bug GetChild顺序错乱

    历史原因,目前有个项目还在使用unity4.3版本,比较过不同Unity版本,发现unity4.3的 transform.GetChild 获取的child顺序并不是想要的. 测试代码 using U ...

  3. [No000056]你无法真正占有一个人,包括你的爱人,先生或太太、小孩,以及你自己....

    从一出生,我们的双手就握的紧紧的,好像深知自己会失去什么 很多人迷信多子多孙才是福,老来才有依靠,但太多新闻告诉我们,很多人老了,子孙为了分家产,反而让他生不如死,死了还无法入土为安. 现实也告诉我们 ...

  4. Netty Client重连实现

    from:http://itindex.net/detail/54161-netty-client 当我们用Netty实现一个TCP client时,我们当然希望当连接断掉的时候Netty能够自动重连 ...

  5. webstrom软件使用

    很多人都发现 http://idea.lanyus.com/ 不能激活了 很多帖子说的 http://15.idea.lanyus.com/ 之类都用不了了 选择 License server (20 ...

  6. BZOJ 1036: [ZJOI2008]树的统计Count

    1036: [ZJOI2008]树的统计Count Time Limit: 10 Sec  Memory Limit: 162 MB Submit: 14354  Solved: 5802 [Subm ...

  7. codevs 1281 Xn数列

    题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入 ...

  8. WP老杨解迷:发布包多少大小合适

    有位做安卓的老兄这样描述发布包大小问题:发布包和女人一样,新包如年轻女子,不能太瘦,太瘦没有货,所以大家都喜欢身段窈窕的少女,正火的产品如中年妇女,要得是风韵魅力,胖瘦已经不那么重要,但是也不能太胖, ...

  9. (转)DataMatrix编码2——伽罗华域运算

    原文出处:http://blog.sina.com.cn/s/blog_4572df4e01019wsj.html 伽罗华域即有限域,RS编码在此域中进行运算,故不得不对其有所了解.DataMatri ...

  10. M3U8格式讲解及实际应用分析

    M3U8格式讲解及实际应用分析 M3U8有啥好处 ? 网上搜索了一下,大家众说纷纭,个人理解主要是可以做多码率的适配,根据网络带宽,客户端会选择一个适合自己码率的文件进行播放,保证视频流的流畅. 在I ...