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