纯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正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
字符串反转_JavaScript
Apr 28 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
小程序实现发表评论功能
Jul 06 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jquery中防刷IP流量软件影响统计的一点对策
2011/07/10 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
python time模块用法实例详解
2014/09/11 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Python中常见的数制转换有哪些
2020/05/27 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
高一家长会邀请函
2014/01/12 职场文书
公关活动策划方案
2014/05/25 职场文书
民族学专业求职信
2014/07/28 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
关于军训的感想
2015/08/07 职场文书