提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

纯js实现div内图片自适应大小(已测试，兼容火狐)

JS测试 实现 图片 大小 兼容 div 适应
2023-06-13 09:15:28 时间
这代码实现的功能就是平常我们遇到的一个div里面包含img的时候，在img图片大小未知，div大小未知的情况下，让图片自适应大小，对于图片本身小于div容器大小时，不作处理。因为如果拉伸，图片可能就失真了。

废话不多说，直接上代码，已测试，兼容火狐，谷歌，IE6，IE7/8

以下是js代码：
复制代码代码如下:

<scripttype="text/javascript"language="javascript">
window.onload=function(){
changeImgSize();
}
functionchangeImgSize(){
vargetContainer=document.getElementById("imgcontainer");
vargetIMG=getContainer.getElementsByTagName("img")[0];
varfw=getContainer.offsetWidth-(2*getContainer.clientLeft);
varfh=getContainer.offsetHeight-(2*getContainer.clientTop);
variw=getIMG.width;
varih=getIMG.height;
varm=iw/fw;
varn=ih/fh;
if(m>=1&&n<=1)
{
iw=Math.ceil(iw/m);
ih=Math.ceil(ih/m);
getIMG.width=iw;
getIMG.height=ih;
}
elseif(m<=1&&n>=1)
{
iw=Math.ceil(iw/n);
ih=Math.ceil(ih/n);
getIMG.width=iw;
getIMG.height=ih;
}
elseif(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)
{
vargetDistance=Math.floor((fh-getIMG.height)/2);
getIMG.style.marginTop=getDistance.toString()+"px";
}
}
</script>

以下是html代码：
复制代码代码如下:

<divclass="sy_pic"id="imgcontainer"><imgsrc="images/444.jpg"/></div>

以下是css代码：
复制代码代码如下:
.sy_pic{width:200px;height:300px;border:#000solid5px;text-align:center;}

自己换下图片地址使用。有问题或者指教请加QQ群：255708401。

相关文章