纯js实现div内图片自适应大小(已测试,兼容火狐)


Posted in Javascript onJune 16, 2014

这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理。因为如果拉伸,图片可能就失真了。

废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8

以下是js代码:

<script type="text/javascript" language="javascript"> 
window.onload=function(){ 
changeImgSize(); 
} 
function changeImgSize(){ 
var getContainer=document.getElementById('imgcontainer'); 
var getIMG=getContainer.getElementsByTagName('img')[0]; 
var fw=getContainer.offsetWidth-(2*getContainer.clientLeft); 
var fh=getContainer.offsetHeight-(2*getContainer.clientTop); 
var iw=getIMG.width; 
var ih=getIMG.height; 
var m=iw/fw; 
var n=ih/fh; 
if(m>=1&&n<=1) 
{ 
iw=Math.ceil(iw/m); 
ih=Math.ceil(ih/m); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
else if(m<=1&&n>=1) 
{ 
iw=Math.ceil(iw/n); 
ih=Math.ceil(ih/n); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
else if(m>=1&&n>=1) 
{ 
getMAX=Math.max(m,n); 
iw=Math.ceil(iw/getMAX); 
ih=Math.ceil(ih/getMAX); 
getIMG.width=iw; 
getIMG.height=ih; 
} 
if(getIMG.height<fh) 
{ 
var getDistance=Math.floor((fh-getIMG.height)/2); 
getIMG.style.marginTop=getDistance.toString()+"px"; 
} 
} 
</script>

以下是html代码:
<div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" /></div>

以下是css代码:
.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}

自己换下图片地址使用。有问题或者指教请加QQ群:255708401。
Javascript 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 #Javascript
两种方法实现在HTML页面加载完毕后运行某个js
Jun 16 #Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 #Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 #Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 #Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 #Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 #Javascript
You might like
js中的前绑定和后绑定详解
2013/08/01 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
2015/12/25 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python MySQLdb使用教程详解
2018/03/20 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
详解Python图像处理库Pillow常用使用方法
2019/09/02 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
党员学习十八大感想
2014/01/17 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
学校后勤岗位职责
2014/02/19 职场文书
活动总结模板
2014/05/09 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
加强作风建设工作总结
2014/10/23 职场文书
毕业生自荐信范文
2015/03/05 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS