JQuery加载图片自适应固定大小的DIV


Posted in Javascript onSeptember 12, 2013

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

jquery图片自适应大小实现过程的主要代码:

代码如下:

.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及性能分析方法
Dec 09 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
jQuery使用方法
Feb 04 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
微信小程序如何获取地址
Dec 24 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 #Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 #Javascript
jquery foreach使用示例
Sep 12 #Javascript
jquery 追加tr和删除tr示例代码
Sep 12 #Javascript
实现只能输入数字的input不用replace方法
Sep 12 #Javascript
jQuery 三击事件实现代码
Sep 11 #Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 #Javascript
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
初始Nodejs
2014/11/08 NodeJs
js的toUpperCase方法用法实例
2015/01/27 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
详解python中init方法和随机数方法
2019/03/13 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
超市端午节活动方案
2014/01/23 职场文书
感恩教育活动总结
2014/05/05 职场文书
销售活动策划方案
2014/08/26 职场文书
先进事迹演讲稿
2014/09/01 职场文书