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. #技塑人生# windows2008无法远程— 注册表缺失键值导致高级防火墙服务异常

    windows2008无法远程— 注册表缺失键值导致高级防火墙服务异常 阿里云技术支持中心:章阿贵 一.远程无法访问(windows server 2008) 症状:无法远程但是系统内网络正常,防火墙 ...

  2. iOS之GCD的DEMO

    由DEMO得知,串行队列同步执行会按照顺序一步一步执行,不会开辟线程 由DEMO得知,串行队列异步执行,队列中的任务会一步一步按顺序执行,队列外的任务不确定.会开辟线程 由DEMO得知,并行队列同步执 ...

  3. 使用jsoup进行网页内容抓取

    对网页内容的抓取比较的感兴趣,于是就简单的学习了一下,如果不使用任何的框架去抓取网页的内容,感觉有点难度,我就简单点来吧,这里所使用的jsoup框架,抓取网页的内容与使用jquery选择网页的内容差不 ...

  4. PHP trim()函数的一些用法

    string trim ( string $str [, string $charlist ] ) - 去除字符串首尾处的空白字符(或者其他字符) trim()函数当第二个参数为空时,默认去掉空格.制 ...

  5. 查看centos中的用户和用户组

    用户列表文件:/etc/passwd 用户组列表文件:/etc/group 查看系统中有哪些用户:cut -d : -f 1 /etc/passwd查看可以登录系统的用户:cat /etc/passw ...

  6. 转: ant condition使用

    评注: 用c语言的方式来,比喻ant...比较好理解 转: http://www.smithfox.com/?e=176 [备忘] Apache Ant中的逻辑判断 [原创链接: http://www ...

  7. 转: Android入门及效率开发

    评注: android第三方开源框架介绍不错 转:https://segmentfault.com/a/1190000004495351 入门 Android官方培训课程中文版:http://huka ...

  8. NodeJS学习之异步编程

    NodeJS -- 异步编程 NodeJS最大的卖点--事件机制和异步IO,对开发者并不透明 代码设计模式 异步编程有很多特有的代码设计模式,为了实现同样的功能,使用同步方式和异步方式编写代码会有很大 ...

  9. phpQuery用法

    了解phpQuery使用前了温习jquery.js的选择用法 jquery选择器,还有一个衍生产品QueryList 例: include 'phpQuery.php'; phpQuery::newD ...

  10. Table of Contents - Tomcat

    Manager 持久化 Session JNDI Resources JNDI 配置 JDBC DataSources DBCP 配置 Realm Configuration 设置 HTTP 基本认证 ...