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. Clairewd’s message

    Problem Description Clairewd is a member of FBI. After several years concealing in BUPT, she interce ...

  2. 1.6.5 Updating Parts of Documents

    1. Updating Parts of Documents 有时候你想要直接改变solr文档中的部分内容,solr有两种合适的方法来改变. 第一种:自动更新,这个方法允许仅仅改变文档的一个或者几个字 ...

  3. 【Linux/Ubuntu学习5】Ubuntu 下android 开发,eclipse不能识别手机

    ubuntu下eclipse不能识别手机解决方法: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 1) 在终端运行 lsusb 会发现结果 ...

  4. Android隐藏状态栏实现沉浸式体验

    转自: Android状态栏微技巧,带你真正理解沉浸式模式 什么叫沉浸式? 根据百度百科上的定义,沉浸式就是要给用户提供完全沉浸的体验,使用户有一种置身于虚拟世界之中的感觉. 那么对应到Android ...

  5. 转:自建CDN防御DDoS(1, 2, 3)infoq

    本文中提到的要点: 1.  针对恶意流的应对方法与策略.(基本上,中级的,顶级的) 2.  IP分类的脚本 3.  前端proxy工具的选择与使用. 4.  开源日志系统的选择与比较. (http:/ ...

  6. 【php基础】XML,DTD实例

    要求一:能看懂别人写的DTD文件,自己能写更好.例如products.dtd: <!ENTITY AUTHOR "John Doe"> <!ENTITY COMP ...

  7. 【CSS3】---曲线阴影翘边阴影

    效果图 代码 index <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title& ...

  8. 使用ambari搭建Hadoop平台

    1.操作系统 CentoOS Server with GUI(有GUI,有浏览器*ambari基于浏览器*推荐latest stable version)2.分区 默认 + /hadoop3.网络设置 ...

  9. 学习Slim Framework for PHP v3 (四)--get()是怎么加进去的?

    看看官网加粗的一句话: At its core, Slim is a dispatcher that receives an HTTP request, invokes an appropriate ...

  10. Process Stats:了解你的APP如何使用内存(转)

    原文地址:http://android-developers.blogspot.com/2014/01/process-stats-understanding-how-your.html?m=1 原作 ...