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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
vue-loader教程介绍
Jun 14 Javascript
React实践之Tree组件的使用方法
Sep 30 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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错误和异常处理功能模块示例
2016/11/12 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python 调试冷知识(小结)
2019/11/11 Python
详解python tcp编程
2020/08/24 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
2014年大学生自我评价
2014/01/19 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技