纯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中json对象和string对象之间相互转化
Dec 26 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
BootStrap selectpicker
Jun 20 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
javascript读写json示例
2014/04/11 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
React组件生命周期详解
2017/07/03 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[54:09]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python实现大学人员管理系统
2019/10/25 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Django如何使用redis作为缓存
2020/05/21 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
专科毕业生求职简历的自我评价
2013/10/12 职场文书
校园招聘策划书
2014/01/09 职场文书
二年级评语大全
2014/04/23 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
Python实现双向链表基本操作
2022/05/25 Python