纯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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
JavaScript Tab菜单实现过程解析
May 13 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
syntaxhighlighter 使用方法
2007/07/02 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解JSON和JSONP劫持以及解决方法
2019/03/08 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
Python标准库sched模块使用指南
2017/07/06 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python3中函数参数的四种简单用法
2018/07/09 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
大学应届毕业生求职信
2014/05/24 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
个人工作总结范文2014
2014/11/07 职场文书
2016年安全月活动总结
2016/04/06 职场文书
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
apache ftpserver搭建ftp服务器
2022/05/20 Servers