JS+css 圖片自動(dòng)縮放自適應(yīng)大小
更新時(shí)間：2013年08月08日 11:11:53 作者：
編輯器上傳的圖片太大了，把FF和IE撐的走形，所以希望圖片在某些頁面里要有固定大小，如果需要某個(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; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。
在放圖片的頁面里加了
<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; 超出的部分隱藏，避免控制圖片大小失敗而引起的撐開變形。
在放圖片的頁面里加了
復(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)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自動(dòng)定位功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
ECMAScript是瀏覽器腳本語言的規(guī)范,而我們熟知的js語言,如JavaScript則是規(guī)范的具體實(shí)現(xiàn),下面這篇文章主要給大家介紹了關(guān)于ES6語法總結(jié)的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了在前端開發(fā)中,常見的跨域解決方案,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2023-09-09
原生js實(shí)現(xiàn)淘寶首頁點(diǎn)擊按鈕緩慢回到頂部效果
本例將實(shí)現(xiàn)這樣的一個(gè)效果：下拉到一定距離后按鈕才顯示出來，鼠標(biāo)放到按鈕上時(shí)，按鈕背景會(huì)變成灰色，并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部2014-04-04
javascript帶回調(diào)函數(shù)的異步腳本載入方法實(shí)例分析
這篇文章主要介紹了javascript帶回調(diào)函數(shù)的異步腳本載入方法,以實(shí)例形式較為詳細(xì)的分析了javascript回調(diào)函數(shù)實(shí)現(xiàn)異步載入的定義與使用技巧,需要的朋友可以參考下2015-07-07
Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解
這篇文章主要介紹了Javascript 模擬mvc實(shí)現(xiàn)點(diǎn)餐程序案例詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
javascript循環(huán)變量注冊(cè)dom事件 之強(qiáng)大的閉包
是在循環(huán)過程過this被改變，注冊(cè)過的事件也被隨之改變，找到了一種解決方法2010-09-09
這篇文章主要介紹了js實(shí)現(xiàn)單擊圖片放大圖片的方法,涉及javascript操作圖片的技巧與onclick事件的用法,需要的朋友可以參考下2015-02-02
autojs 螞蟻森林能量自動(dòng)拾取即給指定好友澆水的實(shí)現(xiàn)方法
這篇文章主要介紹了autojs 螞蟻森林能量自動(dòng)拾取即給指定好友澆水的實(shí)現(xiàn)方法，本文通過圖文并茂實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
js遍歷詳解(forEach, map, for, for...in, for...of)
在本篇文章里小編給大家整理的是關(guān)于js中的各種遍歷(forEach, map, for, for...in, for...of)相關(guān)知識(shí)點(diǎn)用法總結(jié)，需要的朋友們參考下。2019-08-08