JS+css 圖片自動(dòng)縮放自適應(yīng)大小
更新時(shí)間：2013年08月08日 11:11:53 作者：
編輯器上傳的圖片太大了，把FF和IE撐的走形，所以希望圖片在某些頁(yè)面里要有固定大小，如果需要某個(gè)范圍，用getElementByname來設(shè)定，也是一個(gè)道理：
我加了css的限制：
div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無效。
◎ width:600px; 在所有瀏覽器中圖片的大小為600px;
◎ 當(dāng)圖片大小大于600px，自動(dòng)縮小為600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。
在放圖片的頁(yè)面里加了
<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
imgObj = document . getElementsByTagName("img")[i];
//建議只判斷高度或者寬度其中一個(gè)，那樣可以自動(dòng)按比例縮放
if ( imgObj . width > 500 ) //判斷圖片的寬度，如果大于700，則設(shè)置為700，值可以自己修改
{
imgObj . width = 500
}
if ( imgObj . height > 700 ) //判斷圖片的高度，如果大于700，則設(shè)置為700，值可以自己修改
{
imgObj . height = 700
}
}
</script>
單獨(dú)的圖片控制，用這個(gè)：
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>
測(cè)試在IE和FF下通過。
復(fù)制代碼 代碼如下:
div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎ max-width:600px; 在IE7、FF等其他非IE瀏覽器下最大寬度為600px。但在IE6中無效。
◎ width:600px; 在所有瀏覽器中圖片的大小為600px;
◎ 當(dāng)圖片大小大于600px，自動(dòng)縮小為600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。
在放圖片的頁(yè)面里加了
復(fù)制代碼 代碼如下:
<script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i++ )
{
imgObj = document . getElementsByTagName("img")[i];
//建議只判斷高度或者寬度其中一個(gè)，那樣可以自動(dòng)按比例縮放
if ( imgObj . width > 500 ) //判斷圖片的寬度，如果大于700，則設(shè)置為700，值可以自己修改
{
imgObj . width = 500
}
if ( imgObj . height > 700 ) //判斷圖片的高度，如果大于700，則設(shè)置為700，值可以自己修改
{
imgObj . height = 700
}
}
</script>
單獨(dú)的圖片控制，用這個(gè)：
復(fù)制代碼 代碼如下:
<script>
var abc=document.getElementById("abc");
var imgs=abc.getElementsByTagName("img");
for (var i=0,g;g=imgs[i];i++)
g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}
</script>
測(cè)試在IE和FF下通過。
相關(guān)文章
JS動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案
移動(dòng)設(shè)備分辨率五花八門雖然我們可以通過CSS3的media query來實(shí)現(xiàn)適配，但是這種做法并不能適配所有設(shè)備，這篇文章主要介紹了js動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案，非常不錯(cuò)，感興趣的朋友一起看看吧2016-10-10
webpack學(xué)習(xí)教程之publicPath路徑問題詳解
這篇文章主要給大家介紹了webpack學(xué)習(xí)教程之publicPath路徑問題的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
看看執(zhí)行后有什么效果,無論textbox1.text是什么值,都會(huì)時(shí)放條件判斷.為什么呢2009-06-06
JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫開發(fā)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
本文主要介紹了layer彈出層框架alert與msg的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
這篇文章主要介紹了微信小程序文章列表功能,結(jié)合完整實(shí)例形式詳細(xì)分析了微信小程序文章列表功能具體布局、樣式、功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
這篇文章我們給大家總結(jié)了關(guān)于js中Array的方法及技巧，有需要的朋友們可以學(xué)習(xí)參考下。2018-09-09
這篇文章主要給大家介紹了利用純JS實(shí)現(xiàn)像素逐漸顯示的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了微信小程序 彈窗自定義實(shí)例代碼的相關(guān)資料,有時(shí)候做開發(fā)項(xiàng)目的時(shí)候需要根據(jù)客戶需求更改原系統(tǒng)的組件，這里就對(duì)小程序中彈窗進(jìn)行更改，需要的朋友可以參考下2017-03-03
單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動(dòng)端金錢格式的輸入規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05