纯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 相关文章推荐
关于JavaScript的一些看法
May 27 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
JS常用表单验证方法总结
May 22 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
火狐下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
codeigniter中测试通过的分页类示例
2014/04/17 PHP
PHP实现简易blog的制作
2016/10/24 PHP
广告显示判断
2006/08/31 Javascript
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
巧用canvas
2017/01/21 Javascript
javascript数据类型详解
2017/02/07 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
windows下python安装pip图文教程
2018/05/25 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
Java的类与C++的类有什么不同
2014/01/18 面试题
创业计划书的写作技巧及要点
2014/01/31 职场文书
运动会邀请函范文
2014/01/31 职场文书
临床护理求职信
2014/04/26 职场文书
个人担保书格式范文
2014/05/12 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
施工单位安全责任书
2014/07/24 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
办公室主任岗位职责
2015/01/31 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
检讨书怎么写
2015/05/07 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Java实战之用Swing实现通讯录管理系统
2021/06/13 Java/Android