纯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 两个窗体之间传值实现代码
Sep 25 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
javascript实现颜色渐变的方法
Oct 30 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
Dec 14 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
JS重学系列之聊聊new操作符
Mar 04 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中mkdir函数用法实例分析
2014/11/15 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
php分页查询的简单实现代码
2017/03/14 PHP
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
python 实现插入排序算法
2012/06/05 Python
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
python爬虫基础知识点整理
2020/06/02 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
python中K-means算法基础知识点
2021/01/25 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
实习护士自荐信
2014/06/21 职场文书
大学生个人求职信例文
2014/07/07 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL