纯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判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
JS原型链怎么理解
Jun 27 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
Vue 子组件与数据传递问题及注意事项
Jul 11 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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中static,const与define的使用区别
2013/06/18 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
vue登录注册实例详解
2019/09/14 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
思想品德课教学反思
2014/02/10 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
车辆工程专业求职信
2014/04/28 职场文书
团日活动总结书格式
2014/05/08 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js