使用jQuery动态改变图片显示大小
当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下。这段代码可以使图片的大小保持在一定范围内,如果图片的原始尺寸都大于max*值,则显示出来的图片宽度都相等。
$(document).ready(function() {
$('.post img').each(function() {
var maxWidth = 100; // 图片最大宽度
var maxHeight = 100; // 图片最大高度
var ratio = 0; // 缩放比例
var width = $(this).width(); // 图片实际宽度
var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽
if(width > maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width", maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height", height); // 设定等比例缩放后的高度
} // 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height", maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width", width * ratio); // 设定等比例缩放后的高度
}
});
});
在我的js代码中,也采取了这种写法。然而在不同的浏览器测试效果时,发现此种写法不能适应chrome浏览器(chrome版本号为 10.0.648.204),会产生图片以原有尺寸显示出来的bug。后来把$('.post img').each()的代码用$(window).load()方法包装起来,就解决了chrome浏览器显示不正确的问题。那么在chrome浏览 器中为什么会产生bug,并且$(document).ready和$(window).load有什么区别呢?
原来document ready事件是在HTML文档载入即DOM准备好就开始执行了,即使图片资源还没有加载进来。而window load事件执行的稍晚一些,它是在整个页面包括frames, objects和images都加载完成后才开始执行的。从这种区别可以分析出chrome浏览器在对于图片不采用$(window).load()方法 处理时,图片载入与动态改变图片的js代码执行顺序不确定。
使用jQuery动态改变图片显示大小的更多相关文章
- img超出div width时, jQuery动态改变图片显示大小
参考: 1. http://blog.csdn.net/roman_yu/article/details/6641911 2. http://www.cnblogs.com/zyzlywq/archi ...
- 通过html5的range属性动态改变图片的大小
range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果.下面贴出具体的代码,主要参照了 ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- 分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小
原文:分享非常有用的Java程序 (关键代码)(四)---动态改变数组的大小 /** * Reallocates an array with a new size, and copies the co ...
- 使用thumbnailator不按照比例,改变图片的大小
我们在平时的开发中,偶尔也会遇到图片处理的问题,比如图片的压缩,按比例改变图片的大小,不按比例改变图片的大小等等. 如果要自己去开发这样一套工具,我觉得大多数人都是做不到的,所以还是学会站在巨人的肩膀 ...
- Android代码中动态设置图片的大小(自动缩放),位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
- jQuery 实现改变图片指定区域的颜色
javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果. 1.首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄 例1: <img src=& ...
- 由一次动态改变font-size的大小引申的一系列困惑补录
以下结论如有错误,欢迎指正 在切入正题之前,先了解下window 和document这两个大对象 我们熟知 JavaScript的组成如下图所示: window对象和document对象分别属于哪个分 ...
随机推荐
- leetcode 链表 两数相加
两数相加 给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...
- 「WC2016」挑战NPC
「WC2016」挑战NPC 解题思路 这个题建图非常厉害,带花树什么的只会口胡根本写不动,所以我写了机房某大佬教我的乱搞. 考虑把一个筐 \(x\) 拆成 \(x1,x2,x3\) 三个点,且这三个点 ...
- [CodeChef-QTREE6]Query on a tree VI
题目大意: 给你一棵黑白树,每个点默认是白色,要求支持以下两种操作: 1.改变一个点的颜色: 2.除去连接不同颜色的点的边,求某个点连通块的大小. 思路: 对原树维护两个树链剖分, 一棵维护当点x为白 ...
- HTTP首部字段
HTTP首部由首部字段名和首部字段值组成,以逗号隔开.如果首部出现重复,有些浏览器优先处理第一个出现的首部,有些优先处理后者. 主要分为四大类 通用首部字段 请求首部字段 响应首部字段 实体首部字段 ...
- ASP.NET MVC 手机短信验证
本文来自于stoneniqiu的文章,原文地址 http://www.cnblogs.com/stoneniqiu/p/6234002.html 1.注册一个应用 得到AppKey 和 App Sec ...
- linux下插入的mysql数据乱码问题及第三方工具显示乱码问题
一.lampp环境下的数据库乱码问题 问题描述: 在做mysql练习的时候发现新创建的数据库中插入数据表中的记录中文出现乱码的问题,如下图: 经过多方查证,整里如下文挡: 前提: 我自己的环境是使用的 ...
- KVM资源划分分配技巧
kvm有个叫做超分的概念,根据这个特性可以分配出超出物理机配置的数台虚拟机. 以下是自己总结的一些划分技巧: 一.最保守方法(性能最好) 根据物理机的资源,按虚拟机的数量叠加但不超过物理机的总和.不超 ...
- Android字体简述
Android是一个典型的Linux内核的操作系统.在Android系统中,主要有DroidSans和DroidSerif两大字体阵营,从名字就可以看出来,前者是无衬线字体,后者是衬线字体.具体来说, ...
- 解决Xilinx ISE在Win8下打开崩溃闪退的方法
http://www.121down.com/article/article_13651.html 坑爹的ISE对win8无法完美支持(包括目前最新的14.6),在使用64位ISE时点击OPEN之类的 ...
- Make a DAC with a microcontroller's PWM timer
http://www.edn.com/design/analog/4337128/Make-a-DAC-with-a-microcontroller-s-PWM-timer Many embedded ...