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 ...
随机推荐
- 数据结构【三】:简单优先队列PriorityQueue
在数据结构[二]:简单阻塞队列BlockingQueue的基础上添加权限属性:priority,并控制enqueue时根据priority排序插入. 1.定义priority取值范围0~9 2.deq ...
- [Windows] Visual Studio 2010 快捷键大全
Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 生成编译 CTRL + O 打开文件 CTRL ...
- EasyUI设置复选框单选操作
Html 代码: <td align="left" colspan="2"> <input type=& ...
- sql server小技巧-自动添加时间与主键自增长
在敲机房收费系统的时候,遇到添加时间的时候总是通过vb端调用当前时间再添到sql server中,期间还有时因为添加时间格式的不统一导致一些小问题,现在才知道原来是自己孤陋寡闻,sql server ...
- Oracle 基础 <1> --存储过程
一.子程序 子程序是已命名的PL/SQL块,它们存储在数据库中,可以Wie它们指定参数,可以从任何数据库客户端和应用程序中调用它们.子程序包括存储过程和函数. 子程序包括: 1.声明部分:声明部分包括 ...
- Linux常用命令之seq
标题:seq命令的使用 作用:seq命令用于以指定增量从首数开始打印数字到尾数,即产生从某个数到另外一个数之间的所有整数,并且可以对整数的格式.宽度.分割符号进行控制 语法: [1] seq [选项] ...
- [转]Webservice client timeout
本文转自:http://social.msdn.microsoft.com/Forums/vstudio/en-us/ed89ae3c-e5f8-401b-bcc7-333579a9f0fe/webs ...
- JQuery.Gantt(甘特图)开发
一.简介 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. 二.前端页面 2.1 资源引用 首先需要将下载到的源码中的CSS.IMG.JS等资源放入 ...
- DWZ (JUI) 教程 table 排序
dwz排序是后台排序,不是前台的js排序,他的流程和搜索,分页是一样的,当你点击排序的按钮时,从新发送请求刷新当前的navTable 和 dialog. <th width="60&q ...
- asp.net在网页上显示数据库中的数据
第一步: 第二步: 第三步: 第四步:在网页代码中写显示格式代码,如下 <asp:SqlDataSource ID="SqlDataSource1" runat=" ...