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%");
}
}
<style type="text/css">
<!--
img{
max-width:100%;height:auto;
}
-->
</style>
JS获取图片实际宽高及根据图片大小进行自适应的更多相关文章
- 前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...
- js获取隐藏元素宽高的方法
网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...
- JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...
- JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值
$(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...
- JS 获取网页的宽高
网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWi ...
- JS获取当前屏幕宽高
Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...
- js获取浏览器内容宽高(小计)
<SCRIPT LANGUAGE="JavaScript">var s = "";s += "\r\n网页可见区域宽:"+ d ...
- 原生js获取屏幕的宽高
function client(){ if(window.innerHeight !== undefined){ return { "width": window.innerWid ...
- 根据图片url地址获取图片的宽高
/** * 根据img获取图片的宽高 * @param img 图片地址 * @return 图片的对象,对象中图片的真实宽高 */ public BufferedImage getBufferedI ...
随机推荐
- Linux下redis安装与使用
redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载 ...
- Aggressive cows 二分不仅仅是查找
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7083 Accepted: 3522 Description Farme ...
- android MotionEvent中getX()和getRawX()的区别
public class Res extends Activity implements View.OnTouchListener { Button btn = null; int x = 0; in ...
- 干货:VLDB论文摘要-阿里技术突破性创新
阿里技术突破性创新 世界顶级大规模数据处理分析管理会议VLDB(VERY LARGE DATA BASE)于9月1日至5日在杭州举办,该会议也是也是大数据云计算领域的盛会,阿里巴巴两个团队在这个会议上 ...
- 【Python千问 2】Python核心编程(第二版)-- 欢迎来到Python世界
1.1 什么是Python 继承了传统编译语言的强大性和通用性,同时也借鉴了简单脚本和解释语言的易用性. 1.2 起源 来源于某个项目,那些程序员利用手边现有的工具辛苦工作着,他们设想并开发了更好的解 ...
- Android中Handler作用
在Android的UI开发中,我们经常会使用Handler来控制主UI程序的界面变化.有关Handler的作用,我们总结为:与其他线程协同工作,接收其他线程的消息并通过接收到的消息更新主UI线程的内容 ...
- centos下 rpm包sphinx安装成功提示
sphinx: /etc/sphinx /usr/share/sphinx Sphinx installed! Now create a full-text index, start the sear ...
- c++ STL:队列queue、优先队列priority queue 的使用
说明:本文全文转载而来,原文链接:http://www.cppblog.com/wanghaiguang/archive/2012/06/05/177644.html C++ Queues(队列) C ...
- KDE声音服务器 arts
KDE声音服务器 arts arts介绍arts是KDE的核心声音系统,支持多音频流.全双工.网络声音请求.ALSA与OSS驱动后端.JACK声音服务器后端等扩展,它既是声音服务器,也 提供一套音频软 ...
- java.lang.NoClassDefFoundError: org/springframework/context/ApplicationContext
***************************错误提示************************************************ SEVERE: A child cont ...