MozTW 討論區
https://forum.moztw.org/

IE 底下有 max-width 的解決方案嗎？
https://forum.moztw.org/viewtopic.php?f=13&t=11101		 第 1 頁 (共 1 頁)
發表人:  coolcd [ 2005-10-23, 14:09 ]
文章主題 :  IE 底下有 max-width 的解決方案嗎？
最近幫人家修改 Blog 的 CSS，不想讓大圖破壞版面，
所以抱著實驗的心態，設定：
代碼:
 img {max-width: 100%;}

居然成功了耶！ 大圖不再破壞版面。

但問題是 IE 不支援 max-width。

小弟目前是選擇妥協，對於 IE 設定圖片寬度永遠為 50%，這麼一來，
只要圖片不要比母元素寬度的一半小太多，縮放還不會太離譜。

不曉得一般網頁設計師遇到這樣的問題會怎麼來解決？
是否有更好的解決方案？
發表人:  danielwang [ 2005-10-23, 15:16 ]
文章主題 : 
不要設 width，讓圖片自由縮放，在承載區 (container) 裡用 overflow: hidden 來把圖片超過承載區的部份隱藏。

不過要看實際的板面才知道要如何弄
發表人:  coolcd [ 2005-10-23, 18:09 ]
文章主題 : 
danielwang 寫:
不要設 width，讓圖片自由縮放，在承載區 (container) 裡用 overflow: hidden 來把圖片超過承載區的部份隱藏。

不過要看實際的板面才知道要如何弄


但是這麼做圖片就會被裁掉耶...
有「可以讓 IE 只有在圖片大於承載區時才讓圖片 fit 承載區大小」的方法嗎？
發表人:  danielwang [ 2005-10-23, 18:46 ]
文章主題 : 
用 server script 先查看圖片大小再輸出正確的源碼應該是最好的

不然一個很笨的方法是
代碼:
max_img_h = 100;
max_img_w = 100;

function resize_me(img) {
  if ((img.width > max_img_w || (img.height > max_img_h)) {
    if (img.width > img.height) {
       img.width = max_img_w;
       img.height = parseInt(img.height*img.width/max_img_w);
    } else {
       img.height = max_img_h;
       img.width = parseInt(img.width*img.height/max_img_h);
    }
  }
}

:

<img onload="resize_me(this);" ...>
發表人:  coolcd [ 2005-10-24, 22:04 ]
文章主題 : 
謝謝 danielwang ^^

不過我太弱了啦～

你上面寫的我不知道是什麼東東 :oops:

server script 對我來講還太遙遠...

目前只會簡單的 HTML 跟 CSS 而已

看來好像沒有簡單用 CSS 就可以完美解決的辦法

最近學 CSS 才親身體驗到 IE 對 CSS 支援實在有點破...

就連置中 div {margin: 0 auto;} 都看不懂

難怪被人嫌...

>_<
發表人:  josesun [ 2005-10-25, 01:38 ]
文章主題 : 
coolcd 寫:
最近學 CSS 才親身體驗到 IE 對 CSS 支援實在有點破...

就連置中 div {margin: 0 auto;} 都看不懂

難怪被人嫌...

>_<

沒在寫網頁的人根本不知道 IE 有多爛 :wink:
發表人:  wenny [ 2005-10-27, 11:27 ]
文章主題 :  對!!!
我被IE氣到轉圈圈... :evil:
發表人:  danielwang [ 2005-10-27, 11:46 ]
文章主題 :  原範例+說明
微軟專門做會讓人養成編程壞習慣的東西 (IE, VB...) :shock: ?

代碼:
<script type="text/javascript">
max_img_h = 100;  // 圖片的最大高
max_img_w = 100; // 圖片的最大寬

// 重新調圖片大小
function resize_me(img) {
  // 圖片太大了 ?
  if ((img.width > max_img_w || (img.height > max_img_h)) {
    // 縮小但保持高/寬比率

    // 如果圖片原來的寬度 > 高度，把寬度設為最大寬，
    // 高度設為 = 原高度 * 原寬度 / 最大寬。
    if (img.width > img.height) {
       img.width = max_img_w;
       img.height = parseInt(img.height*img.width/max_img_w);
    } else {
       img.height = max_img_h;
       img.width = parseInt(img.width*img.height/max_img_h);
    }
  }
}
</script?
:

<!-- onload 事件會在圖片載入時，也就是圖片大小知道的時候發生 -->
<img onload="resize_me(this);" ...>
發表人:  風痕影 [ 2005-10-28, 18:43 ]
文章主題 : 
coolcd 寫:
謝謝 danielwang ^^

不過我太弱了啦～

你上面寫的我不知道是什麼東東 :oops:

server script 對我來講還太遙遠...

目前只會簡單的 HTML 跟 CSS 而已

JavaScript不是server端的喔＠＠
他是在使用者端執行的程式...
他的用途很廣，例如常見的變換圖片就是
說到變換圖片，這其實也是可以用CSS做的
可是IE並不支援img:hover，只支援a:hover
所以必須將圖片套上超連結
寫成a:hover img，真是麻煩...＝_____＝"
發表人:  Ada [ 2006-01-01, 13:20 ]
文章主題 : 
可參考這篇：
max-width in Internet Explorer
發表人:  xacid [ 2006-01-01, 17:03 ]
文章主題 : 
Ada 寫:
可參考這篇：
max-width in Internet Explorer

css + js + dom....
這什麼鬼.... 可是看起來很有趣啊....
第 1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/