纯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 相关文章推荐
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
javascript实现下拉菜单效果
Feb 09 Javascript
JavaScript执行机制详细介绍
Dec 06 Javascript
TypeScript实用技巧 Nominal Typing名义类型详解
Sep 23 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
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
vue实现打地鼠小游戏
2020/08/21 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python多线程编程简单介绍
2015/04/13 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python变量和数据类型详解
2017/02/15 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
浅谈Python type的使用
2019/11/19 Python
Django缓存Cache使用详解
2020/11/30 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
平面设计的岗位职责
2013/11/08 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
专家推荐信模板
2014/05/09 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
安全生产标语大全
2014/10/06 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
高中物理教学反思
2016/02/19 职场文书
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python
python playwrigh框架入门安装使用
2022/07/23 Python