var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});

  从技术上,我们可以轻松的用文本的最大宽度限制图片,让它们都保持一个宽度,而不按文本的宽度时,我们就需要每个图片的自己的尺寸。我们可以在服务端编辑时声明图片的原始尺寸。而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸,动态改变图片的显示大小。这样即能兼容老的也文本最大宽度的方式,还可以在需要的时候让图片呈现出其原始的大小。

Webkit浏览器(谷歌浏览器等)是在图片的loaded事件之后才能获取高度和宽度值。所以,你不能使用timeout函数延时等待,最好的方法是使用图片的onload事件。

为了避免CSS对图片大小尺寸的影响,上面的代码将图片拷贝到内存中进行计算。

如果你的页面是老式页面,你可以按需把这段代码嵌入页面底部,它不需要你修改原有页面。

如何用JavaScript在浏览器端获取图片的原始尺寸大小?的更多相关文章

  1. js获取图片信息(一)-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  2. JavaScript获取图片的原始尺寸

    页面里的img元素,想要获取它的原始尺寸,以宽度为例可能首先想到的就是width,如下 <img src="http://img11.360buyimg.com/da/g14/M07/ ...

  3. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. jq获取图片的原始尺寸,自适应布局

    原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...

  5. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  6. 转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

    转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如fili ...

  7. [转]js动态获取图片长宽尺寸

    http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相 ...

  8. 使用Python获取图片的物理尺寸(KB)

    如何获取图片的物理尺寸,而非(width, height)? #! -*- coding: utf-8 -*- import requests import io url = "https: ...

  9. Python3.7 练习题(三) 将指定目录下的图片进行批量尺寸大小处理

    # 将指定目录下的图片进行批量尺寸大小处理 #修改图片尺寸 导入Image os 快捷键 alt+enter import os from PIL import Image def process_i ...

随机推荐

  1. PHP自动执行程序

    /****config.php***/ <?php return 1; //需要停止时改成0 ?> /******************/ ignore_user_abort();//关 ...

  2. hadoop命令报错:权限问题

    root用户执行hadoop命令报错: [root@vmocdp125 conf]# hadoop fs -ls /user/ [INFO] 17:50:42 main [RetryInvocatio ...

  3. 【JAVA】final修饰Field

    一.简介 final修饰符可以用来修饰变量.方法.类.final修饰变量时一旦被赋值就不可以改变. 二.final成员变量 成员变量是随类初始化或对象初始化而初始化的.当类初始化的时候,会给类变量分配 ...

  4. Oracle归档已满的处理办法

    SqlPlus: / as sysdba select * from V$FLASH_RECOVERY_AREA_USAGE; show parameter log_archive_dest; sho ...

  5. xadmin学习笔记(一)——编程准备

    前言 xadmin是GitHub上的开源项目,它是Django admin的超强升级版,提供了强大的插件系统,丰富的内置功能,以及无与伦比的UI主题,使管理系统的实现变得异常简单.详情请参见官方网址. ...

  6. ### C++总结-[类成员函数]

    C++类中的常见函数. #@author: gr #@date: 2015-07-23 #@email: forgerui@gmail.com 一.constructor, copy construc ...

  7. [记录 ]升级IOS 9 和 XCode 7 引起的问题

    问题一: 升级xcode 7最低的系统配置要求 升级了ios9 后使用 xcode 6.1 已经不能用了,必须升级 xcode 7才行,原先的系统是OSX 10.10.1 版本.而xcode 7.0 ...

  8. C# ACM poj1004

    水题.. public static void acm1004(float[] a) { ; foreach (var item in a) { sum += item; } Console.Writ ...

  9. Ajax的概述与实现过程

    一.ajax概述 1.Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用.这一技术能够向服务器请求额外数据而无 ...

  10. java集合 collection-list-LinkedList 模拟一个堆栈或者队列数据结构。

    /* 使用LinkedList模拟一个堆栈或者队列数据结构. 堆栈:先进后出 如同一个杯子. 队列:先进先出 First in First out FIFO 如同一个水管. */ import jav ...