純js實(shí)現(xiàn)div內(nèi)圖片自適應(yīng)大小(已測(cè)試，兼容火狐)
更新時(shí)間：2014年06月16日 17:00:28 投稿：whsnow
純js實(shí)現(xiàn)在img圖片大小未知，div大小未知的情況下，讓圖片自適應(yīng)大小,需要的朋友可以參考下
這代碼實(shí)現(xiàn)的功能就是平常我們遇到的一個(gè)div里面包含img的時(shí)候，在img圖片大小未知，div大小未知的情況下，讓圖片自適應(yīng)大小，對(duì)于圖片本身小于div容器大小時(shí)，不作處理。因?yàn)槿绻?，圖片可能就失真了。
廢話不多說，直接上代碼，已測(cè)試，兼容火狐，谷歌，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;}
自己換下圖片地址使用。有問題或者指教請(qǐng)加QQ群：255708401。
廢話不多說，直接上代碼，已測(cè)試，兼容火狐，谷歌，IE6，IE7/8
以下是js代碼：
復(fù)制代碼 代碼如下:
<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代碼：
復(fù)制代碼 代碼如下:
<div class="sy_pic" id="imgcontainer"><img src="images/444.jpg" /></div>
以下是css代碼：
復(fù)制代碼 代碼如下:
.sy_pic{ width:200px; height:300px; border:#000 solid 5px; text-align:center;}
自己換下圖片地址使用。有問題或者指教請(qǐng)加QQ群：255708401。
相關(guān)文章
原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了如何利用原生JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖形驗(yàn)證碼,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以參考下2023-11-11
JS實(shí)現(xiàn)動(dòng)態(tài)星空背景效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)動(dòng)態(tài)星空背景效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
為了提高網(wǎng)站的加載速度，有一個(gè)很重要的手段就是在用戶瀏覽過程中的上游網(wǎng)站做一個(gè)文件的預(yù)加載。2010-04-04
學(xué)習(xí)ajax必須得掌握的就是跨域請(qǐng)求,實(shí)際上在不同源的地址上發(fā)送請(qǐng)求就是跨域請(qǐng)求,本文主要給大家介紹了關(guān)于AJAX請(qǐng)求以及解決跨域問題的相關(guān)資料,需要的朋友可以參考下2022-11-11
本文介紹了JavaScript中的八種數(shù)據(jù)類型：Undefined、Null、Boolean、Number、String、Symbol、BigInt和Object,基礎(chǔ)數(shù)據(jù)類型存儲(chǔ)在棧內(nèi)存中,而引用數(shù)據(jù)類型存儲(chǔ)在堆內(nèi)存中,每種數(shù)據(jù)類型都有其特定的用途和特性2025-01-01
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了javascript Array 數(shù)組常用方法 ,需要的朋友可以參考下2015-04-04
JavaScript實(shí)現(xiàn)加密與解密詳解
這篇文章介紹了JavaScript實(shí)現(xiàn)加密與解密詳解的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
下面小編就為大家?guī)硪黄猨s防阻塞加載的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JavaScript 通過模式匹配實(shí)現(xiàn)重載
昨天rank同學(xué)向我提出一個(gè)問題，在實(shí)際應(yīng)用中有些接口需要提供類似于函數(shù)重載的功能，以方便開發(fā)者組織代碼邏輯，簡(jiǎn)化使用者調(diào)用。2010-08-08