纯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面向对象之二 命名空间
Feb 08 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
vue插件实现v-model功能
Sep 10 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
JS 网站性能优化笔记
2011/05/24 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python的格式化输出(format,%)实例详解
2018/06/01 Python
python自定义函数def的应用详解
2020/06/03 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
入党申请人的自我鉴定
2013/12/01 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
总经理司机职责
2014/02/02 职场文书
党的群众路线学习材料
2014/05/16 职场文书
党员教师一句话承诺
2014/05/30 职场文书
法人委托书范本格式
2014/09/15 职场文书
《1942》观后感
2015/06/08 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL
解析Java中的static关键字
2021/06/14 Java/Android
Python进程池与进程锁之语法学习
2022/04/11 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang