纯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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
使用JavaScript刷新网页的方法
Jun 04 Javascript
js倒计时简单实现代码
Aug 11 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
火狐下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 编写的日历
2006/10/09 PHP
Laravel实现自定义错误输出内容的方法
2016/10/10 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP二维数组去重算法
2016/12/17 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python正则表达式的使用
2017/06/12 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
报告会主持词
2014/04/02 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
基于python实现银行管理系统
2021/04/20 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript