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. ScriptTransformer

    ScriptTransformer可能由java支持的JavaScript语言或者其他脚本语言写成的转换器.只支持Java 6以上版本. 例1: <dataConfig> <scri ...

  2. hdu-5586 Sum(dp)

    题目链接: Sum Time Limit: 2000/1000 MS (Java/Others)     Memory Limit: 65536/65536 K (Java/Others) Probl ...

  3. Google IP 最新地址

    原文地址:https://ideas.spkcn.com/technology/250.html 2015年 目前最新可以直接访问google的IP91.213.30.152173.194.77.14 ...

  4. hdu 4711 动态规划

    思路:其实这题是个挺水的动态规划,一开始就能AC,可是不知道错哪了,瞎改瞎交,WA了数十次.AC之后怎么改都是AC,也不知道改了什么地方,郁闷死了~~~难道开始时的测试数据有问题??? dp[i][j ...

  5. [wordpress] determine_current_user 在get_current_user_id() 或者 wp_get_current_user()会调用

    在看了Cookie Authentication In A AngularJS WordPress Theme之后,清楚了当Wordpress在中使用get_current_user_id() 或者w ...

  6. js里正则表达式详解

    详细内容请点击 正则表达式中的特殊字符 字符 含意 \ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/ ...

  7. 【Mongodb】---关联表查询population

    Population MongoDB是非关联数据库.但是有时候我们还是想引用其它的文档.这就是population的用武之地. Population是从其它文档替换文档中的特定路径.我们可以迁移一个单 ...

  8. HTML_创建易用的Web表单

    首先创建一个表单域集合fieldset fieldset元素允许Web开发者将主题相关的表单组合在一起 <fieldset></fieldset> 要说明的是本例子中每个表单都 ...

  9. Linux 系统中用户切换(su user与 su - user 的区别)

    1. Linux系统中用户切换的命令为su,语法为: su [-fmp] [-c command] [-s shell] [--help] [--version] [-] [USER [ARG]] 参 ...

  10. vpn连接成功后,本地无法连接外网

    把在远程网络上使用默认网关前面的对勾取消掉,确定就ok啦...