纯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 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
js获取select选中的option的text示例代码
Dec 19 Javascript
Javascript 构造函数详解
Oct 22 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue移动端屏幕适配详解
Apr 30 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js使用递归解析xml
2014/12/12 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
pandas带有重复索引操作方法
2018/06/08 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
材料物理专业个人求职信
2013/12/15 职场文书
普通员工辞职信
2014/01/17 职场文书
银行金融服务方案
2014/06/11 职场文书
个人租房协议书
2014/11/28 职场文书
谢师宴邀请函
2015/02/02 职场文书
道歉信范文
2015/05/12 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS