CSS Hack : Image resize dynamically

最近修改了部落格的一些設計,
其中就包括了圖片的大小控制.

根據我自己的統計,過去一年來,
瀏覽我的部落格的人,
有超過7成是使用超過1024x768的解析度,
但還是有3成是使用1024x768的.

這是個令人頭痛的分佈,
因為不知道要把附圖設成什麼樣的大小,
才不會讓大螢幕浪費空間,
也不會讓小螢幕讓圖全佔滿了.

如果要動態的話,用javascript是很直覺的想法.
不過我想試試用CSS,如果可以用的話,會比較單純一點.
很幸運地我找到方法了,
中間最大的問題是瀏覽器的相容性.

我的作法是在img外面多包一個div,
CSS就控制這個div的大小,
而img就填滿這個div.
由於img本來就會自動調整width和height的屬性,
所以就針對width來設定就好了,height就設為auto,
瀏覽器自己會等比例調整.

結果就是看我的部落格上的附圖囉.

<div class="separator">
<img src="xxx.jpg" />
</div>

<style>
/* 給所有瀏覽器看的,div設為40%,不改變img大小 */
.separator {
   width:40%;
}

.separator img {
   border:1px solid black;
   padding:3px;
}

/* 給ie看的,每行結尾加'\9'. */
.separator img {
   border:1px solid black\9;
   padding:3px\9;
   max-width:100%\9;
   height:auto\9;
}

/* 給chrome,safari等webkit核心瀏覽器看的.它們不能看到width. */
@media screen and (-webkit-min-device-pixel-ratio:0){
.separator img {
   border:1px solid black;
   padding:3px;
   max-width:100%;
   height:auto;
}
}

/* 給mozilla核心的瀏覽器看的.它們不能看到max-width */
@-moz-document url-prefix() {
.separator img {
    border:1px solid black;
   padding:3px;
   width:100%;
   height:auto;
   }
}
</style>