纯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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
jQuery 操作option的实现代码
2011/03/03 Javascript
封装了一个js图片轮换效果的函数
2011/09/28 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
TensorFlow实现创建分类器
2018/02/06 Python
Python将图片转换为字符画的方法
2020/06/16 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
玲玲的画教学反思
2014/02/04 职场文书
爱心捐助倡议书
2014/05/19 职场文书
食品安全承诺书
2014/05/22 职场文书
继承公证书格式
2015/01/26 职场文书
电影建国大业观后感
2015/06/01 职场文书
初级职称评定工作总结
2015/08/13 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
python编写函数注意事项总结
2021/03/29 Python