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获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  2. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  3. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

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

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

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

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

  6. RT/Metro商店应用如何如何获取图片的宽高

    RT/Metro商店应用如何如何获取图片的宽高 var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms ...

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

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

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

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

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

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

随机推荐

  1. 华为机试 之 joseph环

    一:首先科普一下约瑟夫问题的数学方法 (1)  不管是用list实现还是用vector实现都有一个共同点:要模拟整个游戏过程,不仅程序写起来比較烦,并且时间复杂度高达O(nm),当n,m很大(比如上百 ...

  2. Android Studio怎样更改JDK和SDK的路径?

    这个对于非常多刚转到Android Studio上的来说,确实是一个问题.可能你在设置里面找了非常久都没找到这个选项. 直接上图吧,按下图就能够找到设置的地儿了,然后直接设置到你SDK或者JDK的路径 ...

  3. 勾选Create git respository的作用

    在Xcode中创建项目时会弹出Source Control选项,勾选Create git repository选项可以帮助我们对照以前项目中代码中修改的部分,为开发提供方便. 在项目完成到一定程度时, ...

  4. 多线程编程 (1) -NSThread

    每个iOS应用程序都有个专门用来更新显示UI界面.处理用户触摸事件的主线程,因此不能将其他太耗时的操作放在主线程中执行,不然会造成主线程堵塞(出现卡机现象),带来极坏的用户体验.一般的解决方案就是将那 ...

  5. 第1章1节《MonkeyRunner源码剖析》概述:前言(原创)

    天地会珠海分舵注:本来这一系列是准备出一本书的,详情请见早前博文“寻求合作伙伴编写<深入理解 MonkeyRunner>书籍“.但因为诸多原因,没有如愿.所以这里把草稿分享出来,所以错误在 ...

  6. JavaEE——Intellij Idea 创建JavaWeb项目

    原文:JavaEE--Intellij Idea 创建JavaWeb项目 折腾Tomcat折腾了两个晚上,第一个晚上怎么都进不了Tomcat的首页,第二个晚上进去了,但是新建的Web项目,在浏览器中运 ...

  7. 开源的.Net ORM微型框架SuperHelper

    SuperHelper——灵活通用的.开源的.Net ORM微型框架 SuperHelper是博主利用业余时间编写的一个ORM微型框架,除了可以提高开发效率,与其它ORM框架相比,博主更加喜欢Supe ...

  8. 大数据时代:基于微软案例数据库数据挖掘知识点总结(Microsoft 聚类分析算法)

    原文:(原创)大数据时代:基于微软案例数据库数据挖掘知识点总结(Microsoft 聚类分析算法) 本篇文章主要是继续上一篇Microsoft决策树分析算法后,采用另外一种分析算法对目标顾客群体的挖掘 ...

  9. 安装WindowsXP操作系统(Ghost版) - 初学者系列 - 学习者系列文章

    Windows XP的Ghost版是经典的版本.因为XP相对较小些,所以用Ghost起来速度比较快.如果Ghost那个Windows 7之类的,速度就慢了.Windows 7建议还是安装比较快.下面简 ...

  10. JavaScript语言基础知识8

    这篇文章是对前面学习的知识进行总结: 1.JavaScript支持多种数据类型,如数值类型.字符串类型.布尔类型等. 2.在JavaScript中,字符串是用引號括起来的字符系列,转义字符能够用来表示 ...