※ 引述《leomayjeff (lol)》之銘言：
有一種比較新的辦法可以只靠 CSS 做到對應畫面寬或高，
但這方法有點太新了 XD... IE 到 11 才開始支援，
Firefox/Chrome 則分別是 19/26 版開始支援
就是使用 vw, vh 這兩個單位：
http://jsfiddle.net/dr3T3/
1vw 等於畫面 (可見部分) 的 1% 寬度，所以 100vw 就等於畫面寬度
100vh 則是畫面高度 (數值可以有小數點)
我上面寫的這個範例是讓寬度最高到 25%
而高度則最大到 25% 的 "畫面高度" XD (.test1)
而 .test2 則是沒設定最大高度的情形
我用 max-width 而不用 width 是為了避免變形
因為一旦指定了固定的 width 但高度超過 max-height 的話，
圖片會直接被壓扁 XDDDD
--
═ 風痕影 ════════════════════════════
「藤井樹，這主意雖好，但是，我喜歡統一，而不是光泉耶！」
══════════════════════ http://hit1205.org ═
--
推 wei76422:不過你的問題可以用max-height來讓圖片不放那麼大04/28 12:55
: height沒法用% 這樣就得寫死高度了... 有一種比較新的辦法可以只靠 CSS 做到對應畫面寬或高，
但這方法有點太新了 XD... IE 到 11 才開始支援，
Firefox/Chrome 則分別是 19/26 版開始支援
就是使用 vw, vh 這兩個單位：
http://jsfiddle.net/dr3T3/
1vw 等於畫面 (可見部分) 的 1% 寬度，所以 100vw 就等於畫面寬度
100vh 則是畫面高度 (數值可以有小數點)
我上面寫的這個範例是讓寬度最高到 25%
而高度則最大到 25% 的 "畫面高度" XD (.test1)
而 .test2 則是沒設定最大高度的情形
我用 max-width 而不用 width 是為了避免變形
因為一旦指定了固定的 width 但高度超過 max-height 的話，
圖片會直接被壓扁 XDDDD
--
═ 風痕影 ════════════════════════════
「藤井樹，這主意雖好，但是，我喜歡統一，而不是光泉耶！」
══════════════════════ http://hit1205.org ═
--
All Comments