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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
js查错流程归纳
May 04 Javascript
jQuery.Validate验证库的使用介绍
Apr 26 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
Sep 12 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
php入门教程 精简版
2009/12/13 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python中字典增加和删除使用方法
2020/09/30 Python
大学生专科毕业生自我评价
2013/11/17 职场文书
单位在职证明范本
2014/01/09 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
2014年小学元旦活动方案
2014/02/12 职场文书
烹饪自我鉴定
2014/03/01 职场文书
初中同学会活动方案
2014/08/22 职场文书
安全伴我行主题班会
2015/08/13 职场文书
MySQL注入基础练习
2021/05/30 MySQL
go web 预防跨站脚本的实现方式
2021/06/11 Golang