//页面加载完执行resizeImage()函数
$(document).ready(resizeImage()); function resizeImage(){
$(".pic a img").each(function(){
//加载图片至内存,完成后执行
$(this).load(function(){
//获得原始图片高宽
var imgWidth = $(this).width();
var imgHeight = $(this).height();
//获得图片所在Div高宽
var boxWidth=$('.pic').width();
var boxHeight=$('.pic').height();
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
$(this).width((boxHeight*imgWidth)/imgHeight);
$(this).height(boxHeight);
//让图片居中显示
var margin=(boxWidth-$(this).width())/2;
$(this).css("margin-left",margin);
}
else
{
//重新设置img的width和height
$(this).width(boxWidth);
$(this).height((boxWidth*imgHeight)/imgWidth);
//让图片居中显示
var margin=(boxHeight-$(this).height())/2;
$(this).css("margin-top",margin);
}
});
})
}

 推荐一个自己业余时间开发的网盘搜索引擎,360盘搜www.360panso.com

Jquery动态进行图片缩略的更多相关文章

  1. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  2. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  3. img超出div width时, jQuery动态改变图片显示大小

    参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...

  4. 图片查看器(类似于QQ,另外又加了JARA的下方的图片缩略导航图)

    源码地址:https://gitee.com/yolanda624/coffer/tree/master/src/components/a-photo-view

  5. 如何解决谷歌浏览器下jquery无法获取图片的尺寸

    代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...

  6. jquery插件--多行文本缩略

    1.webkit内核多行缩略样式 text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orie ...

  7. Android图片与缩略

    /** * 将图片文件原比例缩略.并使其不超过最大宽.高 * @param path : 图片文件 * @param requestW : 缩略后最大宽度 * @param requestH : 缩略 ...

  8. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  9. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

  1. PHP使用mail()函数发送邮件流程以及注意事项

    1. 配置 php.ini sendmail_path = /usr/sbin/sendmail -f yourname@sth.com -t -i 2. 使用函数 mail($to, $subjec ...

  2. MySQL中char(36)被认为是GUID导致的BUG及解决方案

    MySQL中char(36)被认为是GUID导致的BUG及解决方案 有时候在使用Toad或在程序中,偶尔会遇到如下的错误: System.FormatException GUID 应包含带 4 个短划 ...

  3. python3.0_day9_scoket基础之篇

    一.socket简单介绍 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求 ...

  4. 【mybaits】Mybatis中模糊查询的各种写法

    工作中用到,写三种用法吧,第四种为大小写匹配查询 1. sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{t ...

  5. spring配置中,properties文件以及xml文件配置问题

    spring方便我们的项目快速搭建,功能强大,自然也会是体系复杂! 这里说下配置文件properties管理的问题. 一些不涉及到代码逻辑,仅仅只是配置数据,可以放在xxxx.properties文件 ...

  6. 战胜忧虑<4>——让平均概率来替你分忧

    让平均概率来替你分忧. 我们可以根据事情发生的平均率来评估我们的忧虑究竟值不值,如此一来,我想你和我应该可以去除99%的忧虑. 故事 我从小生长在密苏里州的一个农场,有一天,正帮妈妈采摘樱桃的时候,我 ...

  7. Android和WCF通信 - 大数据压缩后传输

    Android和WCF通信 - 大数据压缩后传输 本帖来源:http://www.cnblogs.com/lykbk/archive/2013/08/15/3259045.html 最近一直在优化项目 ...

  8. SQL执行效率和性能测试方法

    对于做管理系统和分析系统的程序员,复杂SQL语句是不可避免的,面对海量数据,有时候经过优化的某一条语句,可以提高执行效率和整体运行性能.如何选择SQL语句,本文提供了两种方法,分别对多条SQL进行量化 ...

  9. java.io.FileNotFoundException:SESSIONS.ser (系统找不到指定的路径。)

    问题如下: java.io.FileNotFoundException: E:\apache-tomcat-8.0.37\work\Catalina\localhost\20161013Shoppin ...

  10. CFLAGS,CPPFLAGS,CXXFLAGS in Makefile

    CC 与 CXX:      这是 C 与 C++ 编译器命令.默认值一般是 “gcc” 与 “g++”. CPPFLAGS will be given to the C preprocessor   ...