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. Java_Web使用简单的批处理操作

    之前进行Web开发的时候使用的是myeclipse,但只用过的人都知道,由于其插件太多,而且有很多插件的功能根本就接触不到.所以导致一旦工程稍微大一点就会很卡,虽然之前也对其进行优化过,但还是觉得不太 ...

  2. android MotionEvent中getX()和getRawX()的区别

    public class Res extends Activity implements View.OnTouchListener { Button btn = null; int x = 0; in ...

  3. 机顶盒Demux

    主页http://www.videolan.org/vlc/ 机顶盒软件开发仿真平台的设计与实现http://max.book118.com/html/2012/0311/1260745.shtm

  4. mybatis 处理数组类型及使用Json格式保存数据 JsonTypeHandler and ArrayTypeHandler

    mybatis 比 ibatis 改进了很多,特别是支持了注解,支持了plugin inteceptor,也给开发者带来了更多的灵活性,相比其他ORM,我还是挺喜欢mybatis的. 闲言碎语不要讲, ...

  5. 判断某个对象是不是DOM对象

    在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有DOM ...

  6. java中的CountDownLatch

    闭锁是一种同步工具类,可以延迟线程的进度直到其达到终止状态.闭锁的作用相当于一扇门:在闭锁到达结束状态值钱,这扇门一直是关闭的,没有任何线程可以通过,当到大结束状态时,这扇门会打开并允许所有的线程通过 ...

  7. 如何提高手机APP的用户体验?

    详细内容请点击 随着移动互联网如日中天,如火如荼的时候,手机APP开发日益高涨了起来,关于手机APP的用户体验,也是一个老话长谈的话题.从事这行业也很久了,以下是我个人在工作中的一些关于APP的用户体 ...

  8. XAML

    XAML定义 XAML是一种相对简单.通用的声明式编程语言,它适合于构建和初始化.NET对象. XAML仅仅是一种使用.NET API的方式,把它与HTML.可伸缩向量图形(SVG)或其他特定领域的格 ...

  9. android:launchMode概述

    android:launchMode An instruction on how the activity should be launched. There are four modes that ...

  10. AccessHelper类

    using System; using System.Data; using System.Configuration; using System.Data.OleDb; using System.C ...