CSS之按比例縮小圖片大小

敲著鍵盤、拖著滑鼠。

左拉拉，右移移，眼看一個主題即將完成，一放上測試平台就發現…

「靠！圖片破格了…」

以上純屬虛構。其實，是我前一陣子在改一些佈景，發現某些佈景中，圖片似乎會超出版面範圍，這大大的破壞了畫面的美感。為了改善這問題，查了些資料，有些是利用JS來達成，但我又不希望使用JS，因為網站已經夠多JS在脫慢速度了…因此此就投向CSS偉大的懷抱中。

用CSS達成這目的很簡單，只要你確定了你圖片所想要的寬度，接下來的事情就是把程式碼輸入到樣式表裡面這樣簡單而已。

img {
    max-width:550px;
    height:inherit;
    width:expression(document.body.clientWidth>550?"550px""auto");/*若圖片大於550px就調整*/    overflow:hidden;      /*超過不顯示*/}

其中，max-width為圖片最大寬度，底下的數值皆以此為準修改就可以了~

20110129補充: 如果不考慮 IE 6 的話，expression 那行其實可以去掉 而且有那行的話，等於只要用 IE 看還是多了一行 JS …XD

感謝風痕影~