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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例
2020/08/17 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
2013/06/25 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
python django 访问静态文件出现404或500错误
2017/01/20 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python如何实现强制数据类型转换
2019/11/22 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
财务总监管理岗位职责
2014/03/08 职场文书
安全负责人任命书
2014/06/06 职场文书
不同意离婚上诉状
2015/05/23 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫