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

标签:公司介绍    日期:2018-12-03 10:57    录入:美娱国际平台注册    浏览:

  

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

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

  
  
废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8  
  
以下是js代码:  
代码如下:

  
  
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{  
var getDistance=Math.floor((fh-getIMG.height)/2);  
getIMG.style.marginTop=getDistance.toString()+"px";  
}  
}  
  
  
以下是html代码:  
代码如下:
  
  
  
以下是css代码:  
代码如下:
  
.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}  
  
自己换下图片地址使用。有问题或者指教请加QQ群:255708401。

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:学会充分利用你的零碎时间
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行