讓 Blog 圖片等比例縮小

一直都有在看一個攝影家的 blog — 大喇叭沒誠意的馬後砲,裡面會有一些 demo 的照片可供參考,不過有個問題是該作者很喜歡用大圖片來展示,我可以了解在大螢幕上看大圖的爽度,但對我們這種小螢幕的使用者來說就不是這麼舒服。

版面為了維持 100% 的寬度,(也就是說螢幕解析度是 1024px 寬,版面就是 1024px,螢幕 1440px,版面就 1440px),所以在大螢幕上可以完全容納的大圖,在小螢幕上,圖片就會被縮小。

按照 html 的規則,除非刻意去指定不同比例的寬、高,不然瀏覽器都會自動按照等比例去縮放圖片,但該 blog 不知道是哪一條 css 規則設定到,圖片都只會縮寬邊,高度不變,也就形成奇怪的比例,瀏覽起來感覺很差。

如果使用 google reader 來看,圖片下方會有個橫向 scroll bar,可以拉來拉去看大圖沒辦法一次顯示的部份,但無名的 rss feed 只會顯示部份文章內容,還是沒辦法用這個方法來閱讀該 blog 的所有內容。

其實如果可以用 Yahoo Pipes 改造一下無名的 rss feed 變成可以瀏覽全文,也是一個解決方法,而且不會影響到其他使用者,作者也不需要更動什麼,不過這好像不是太簡單,所以還是嘗試著去改該 blog 的 css 設定。

經過了一番嘗試,發現在跟 image 相關的設定裡加上 max-width: 100%; 屬性就可以限制它的最大寬度,但還是得讓它的高度正常,於是加上 height: auto;

經過 email 去和該作者商量修改後,嘿嘿,所以現在在我的小螢幕上看這個 blog 也不會變形啦~爽啦~

2009.02.23 (補)

BTW, 做了另一個測試,其實各家瀏覽器對於縮圖應該都有自己的一套,目前用起來的感覺,效果大概是 Opera > Safari > Firefox 3 >> IE7,可以參考下面的圖片。(大家還要繼續被 M$ 的 IE 綁架嗎?)

# Opera 9.63 (最忠於原圖的表現)

# Safari 3.2.2 (看起來有點模糊,反而有點柔焦的感覺)

# Firefox 3 (稍微銳化過度)

# IE7 (一整個銳化過度,稜角太明顯)