纯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的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
Vue实现简单的跑马灯
May 25 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
Aug 19 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
短波收音机简介
2021/03/01 无线电
PHP钩子实现方法解析
2019/05/21 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
js简单时间比较的方法
2016/08/02 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Node.js 中使用 async 函数的方法
2017/11/20 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
来自圣地亚哥的实惠太阳镜:Knockaround
2018/08/27 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
校运动会广播稿(100篇)
2014/09/12 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
唐山大地震观后感
2015/06/05 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
检讨书格式
2019/04/25 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技