//页面加载完执行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. 谓词的使用 -ios

    #import <Foundation/Foundation.h> @interface Person : NSObject<NSCopying> @property(nona ...

  2. Using CSV-Format Log Output

    Including csvlog in the log_destination list provides a convenient way to import log files into a da ...

  3. PHP快速排序及其时间复杂度

    <?php function quickSort(&$arr, $l, $r) { if (count($arr)<2 || $l>$r) return; $tmp_l = ...

  4. Android-Adapter用法总结

    1.概念 Adapter是连接后端数据和前端显示的适配器接口,是数据和UI(View)之间一个重要的纽带.在常见的 View(ListView,GridView)等地方都需要用到Adapter.如下图 ...

  5. 解决Navicat无法连接Oracle的问题

    G:\app\hoge\product\11.2.0\dbhome_3\BIN

  6. maven项目依赖小试牛刀

    1.先建立空的wbh-parent,留下pom.xml;将项目中用的jar包依赖全放进去: 2.建立core项目,当然全是maven的,这个建好后,是用来让其他项目引用的,所以必须用maven ins ...

  7. (四)文本编辑器Vim/Vi

    目录 前言 常用命令 扩展应用 总结 本系列先前的随笔位于新浪博客 前言 Vi和Vim都是文本编辑器,不同的是Vim是Vi的升级版本,它不仅兼容Vi的所有指令,而且还有一些新的特性在里面. Vim/V ...

  8. Android Virtual Device(AVD)屏幕大小调整

    (1)各种常用机型的分辨率列表如下: WXGA800                 480X800 WVGA854                 480X854 WXGA720          ...

  9. 【设计模式】装饰者模式(Decorator)

    装饰者模式 动态的将责任附加到对象上,若要扩展功能,装饰者提供了比继承更有弹性的替代方案. Java I/O中的装饰类 示例:coffee装饰者模式类图 顶层超类 被装饰组件-被装饰者 装饰者抽象类 ...

  10. 【Struts2学习笔记-8】Struts2实现json数据的返回

    需要的jar包 struts2-json-plugin-2.3.12.jar xwork-core-2.3.16.3.jar struts.xml 来自为知笔记(Wiz) 附件列表 IMG_20150 ...