首頁  >  文章  >  web前端  >  JS css 圖片自動縮放自適應大小_javascript技巧

JS css 圖片自動縮放自適應大小_javascript技巧

WBOY
WBOY原創
2016-05-16 17:26:201488瀏覽

我加了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></script>
程式碼如下:

單獨的圖片控制,用這個:

複製程式碼 程式碼如下:
<script><BR>var abc=docum. "abc");<BR>var imgs=abc.getElementsByTagName("img");<BR>for (var i=0,g;g=imgs[i];i )<BR>g.onload=function( ){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}<BR></script>

測試在IE和FF下通過。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn