jquery中加载图片自适应大小主要实现代码


Posted in Javascript onAugust 23, 2013

如何在固定大小的div中放置一个图片,当图片较小时显示实际大小,当图片超过div 大小时图片 自动适应div 的大小
实现过程的主要代码:

.divImg{ 
max-height:200px; max-width:200px; 
width: expression(this.width > 200 && this.width > this.height ? 200 : auto); 
height: expression(this.height > 200 ? 200 : auto); 
}

实例:
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/> 
<title>实现图片加载自适应</title> 
<script type="text/javascript" src="../jquery.min.js"> </script> 
<script type="text/javascript"> 
function clickMe(){ 
var url="../Images/1.jpg"; 
$("#img").attr("src",url); 
$("#img").addClass("divImg"); 
} 
</script> 
<style type="text/css"> 
.divClass { 
border: 1px solid red; 
width: 200px; 
height: 200px; 
} 
.divImg{ 
max-height:200px; max-width:200px; 
width: expression(this.width > 200 && this.width > this.height ? 200 : auto); 
height: expression(this.height > 200 ? 200 : auto); 
} 
</style> 
</head> 
<body> 
<div class="divClass"> 
<img id="img" > </img> 
</div> 
<div> 
<input type="button" id="btn" style="width:50px;height: 30px;border:1px solid blue;" value="btn" onclick="clickMe()"/> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
JQuery日历插件My97DatePicker日期范围限制
Jan 20 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 #Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 #Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 #Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 #Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 #Javascript
高效率JavaScript编写技巧整理
Aug 23 #Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 #Javascript
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP array 的加法操作代码
2010/07/24 PHP
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Django实现简单分页功能的方法详解
2017/12/05 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python实现数据分析与建模
2019/07/11 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
tensorflow常用函数API介绍
2020/04/19 Python
8种常用的Python工具
2020/08/05 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
2014年党建工作汇报材料
2014/11/02 职场文书
入党群众意见范文
2015/06/02 职场文书
人民币使用说明书
2019/04/17 职场文书
Python 如何安装Selenium
2021/05/06 Python