JS获取图片实际宽高,以及根据图片大小进行自适应 
<img src="http://xxx.jpg" id="imgs" onload="adapt();"/> 
function adapt(){ 
var tableWidth = $("#imgTable").width(); //表格宽度 
var img = new Image(); 
img.src =$('#imgs').attr("src") ; 
var imgWidth = img.width; //图片实际宽度 
if(imgWidth<tableWidth){ 
$('#imgs').attr("style","width: auto"); 
}else{ 
$('#imgs').attr("style","width: 100%"); 

另可设置CSS样式: 
<style type="text/css"> 
<!-- 
img{ 
max-width:100%;height:auto; 

--> 
</style> 

JS获取图片实际宽高及根据图片大小进行自适应的更多相关文章

  1. 前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  2. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  3. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  4. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  5. JS 获取网页的宽高

    网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...

  6. JS获取当前屏幕宽高

    Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...

  7. js获取浏览器内容宽高(小计)

    <SCRIPT LANGUAGE="JavaScript">var  s = "";s += "\r\n网页可见区域宽:"+ d ...

  8. 原生js获取屏幕的宽高

    function client(){ if(window.innerHeight !== undefined){ return { "width": window.innerWid ...

  9. 根据图片url地址获取图片的宽高

    /** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...

随机推荐

  1. DIH中添加不同的数据源

    需求:从mysql数据库中读取一个知识记录,从记录表中的字段值中获取一个文件路径,读取xml文件,xml文件中可能包含多个文档内容.建立索引. xml文件样例: <?xml version=&q ...

  2. 控制反转(IoC)

          大量使用工厂模式引起的问题:       Client 对象需要使用 Service1 的 execute( ) 方法完成特定功能,而 Service1 的实现 Service1Impe类 ...

  3. Unity3d之Shader编程:子着色器、通道与标签的写法 & 纹理混合

    一.子着色器 Unity中的每一个着色器都包含一个subshader的列表,当Unity需要显示一个网格时,它能发现使用的着色器,并提取第一个能运行在当前用户的显示卡上的子着色器. 我们知道,子着色器 ...

  4. 九 AIDL

      多进程 多线程 优点 安全 稳定 扩大内存空间 节约CPU时间 AIDL=Android Interface definition language   使用情况:做一个下载,不想让你的下载拖垮你 ...

  5. IOS开发UI篇之tableView 的用法详解

    1.我们知道tableView是IOS中的高级视图,其继承与ScrollView,故我们知道他有具有ScrollView的所有功能.而且还扩展了许多.当然在这里就不一一介绍了. 2.tableView ...

  6. windows更新npm

    今天遇到一个项目需要更新npm的版本,搜了一下如何更新npm的方法,有的人说直接重装node,npm版本就会是最新的,真是无力吐槽,要是每次更新都得这么麻烦还得了,我觉得一定有更好更简单的方法,最后果 ...

  7. MySQL双主配置

    MySQL双主配置 准备环境:服务器操作系统为RHEL6.4 x86_64,为最小化安装.主机A和主机B均关闭防火墙和SELINUX ,IP地址分别为192.168.131.129和192.168.1 ...

  8. Terminate program hitting CTRl+C within GDB

    Q: My program is determined to stop its execution by hitting CTRL+C in command window. By now, i hav ...

  9. Linux 驱动分类 与访问技术

    驱动开发概述 1.驱动分类 1.1 常规分析法 1.1.1  字符设备  字符设备是一种按字节来访问的设备,字符驱动则负责驱动字符设备,  这样的驱动通常实现open, close, read和wri ...

  10. [Excel操作]Microsoft Office Excel 不能访问文件

    最近,客户服务器迁移,因操作系统环境变化而引起的的环境问题一堆,遇到的问题并解决方法在“[Excel]操作”类别会体现. Microsoft Office Excel 不能访问文件“C:\\LMSEx ...