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. VirtualBox 导入.vdi文件时报“uuid is exists”错误

    解决办法: 1.要安装的.vdi文件所在目录:D:\developTools\vm\RedHatLinux1.vdi 2.找到VirtualBox的安装目录,这里是D:\Program Files\O ...

  2. In-Memory:Hash Index

    SQL Server 2016支持哈希查找,用户可以在内存优化表(Memory-Optimized Table)上创建Hash Index,使用Hash 查找算法,实现数据的极速查找.在使用上,Has ...

  3. 【Android 界面效果38】android:inputType常用取值

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content&q ...

  4. 关于Django中的表单验证

    ModelForm 和 普通的Form 都可以做表单验证 对于ModelForm如果只是想验证其中一部分model中的field,可以指定:内部类Meta的fields元素: fields = ('x ...

  5. property在括号中应该怎样写

    property 属性的定义,类似于get set assign: 简单的赋值,不更改索引计数 使用assign是针对基础的数据类型,比如NSinterger,CGFloat和c数据类型(int fl ...

  6. 重构2-Move Method(方法移动)

    重构同样非常简单,以至于人们并不认为这是一个有价值的重构.迁移方法(Move Method),顾名思义就是将方法迁移到合适的位置.在开始重构前,我们先看看一下代码: ) ) return 0.03; ...

  7. MyEclipse设置编码方式 转载【http://www.cnblogs.com/susuyu/archive/2012/06/27/2566062.html】

    1.windows->Preferences……打开"首选项"对话框,左侧导航树,导航到general->Workspace, 右侧Text file encoding ...

  8. hdu-5505(数论)

    题目链接: GT and numbers Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Ot ...

  9. ZWave for Arduino

    https://sites.google.com/site/arduinozwave/http://www.ebay.com/sch/i.html?_trksid=p2050601.m570.l131 ...

  10. selenium遍历控件集合

    场景:需要重复增加地址栏信息,如果地址信息超过了5个就不开始增加 如图: 1.找到控件集合,在遍历每个子元素,在进行选择 1.先找到最外层的div的控件集合 2.外层的css定位为: int star ...