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

感謝風痕影~



You can leave a response, or trackback from your own site.
  1. 風痕影 says:

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

  2. 聽 。風 says:

    這是在CSS裡面放JS嘛?

  3. 小Y says:

    最近才開始接觸當起部落客
    只能說你們好厲害
    我都看不懂原始碼...
    都要到處去請教幫忙

留點話再走吧 =D

Site Meter test internet speed Creative Commons License

无觅相关文章插件,快速提升流量