纯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数组的扩展实现代码集合
Jun 01 Javascript
jquery tab标签页的制作
May 10 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
js实现随机点名
Jan 19 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
Terran热键控制
2020/03/14 星际争霸
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php 删除cookie方法详解
2014/12/01 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Python map和reduce函数用法示例
2015/02/26 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
谈谈python垃圾回收机制
2020/09/27 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
工程管理造价应届生求职信
2013/11/13 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
关于赌博的检讨书
2014/01/24 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers