纯js实现div内图片自适应大小(已测试，兼容火狐)
更新时间：2014年06月16日 17:00:28 投稿：whsnow
纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下
这代码实现的功能就是平常我们遇到的一个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。
废话不多说，直接上代码，已测试，兼容火狐，谷歌，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。
相关文章
在我们前端编程中,假如我们要给后端发送请求,万一手抖多点了几次,多发送了几遍怎么办,那就得用防抖处理,下面小编就来教大家如何实现防抖吧2023-11-11
这篇文章主要为大家详细介绍了JS实现轮播图效果的3种简单方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
一个不错的用JavaScript实现的UBB编码函数...2007-03-03
今天小编就为大家分享一篇layer弹出层全屏及关闭方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
下面小编就为大家带来一篇深入剖析javascript中的exec与match方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍Javascript 5种过滤删除前后所有空格的方法,比较实用,需要的朋友可以参考下。2016-06-06
这篇文章主要介绍了微信公众号平台接口开发 菜单管理的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
这篇文章主要对javascript的数组方法进行了详细的汇总，包括了最常用的的数组方法，还有扩展方法，很全面，感兴趣的小伙伴们可以参考一下2015-11-11
用javascript操作xml...2006-11-11
这篇文章主要为大家详细介绍了JavaScript实现大文件上传功能的示例代码，文中的代码讲解详细，对我们学习JavaScript有一定帮助，感兴趣可以跟随小编一起学习一下2022-11-11
最新评论