使用 CSS 按比例縮小圖片

要把一張大圖片按比例縮小到某個尺寸，對於現代瀏覽器，直接使用 max-width 和 max-height 兩個 CSS 語法即可。

咦~~什麼叫現代瀏覽器呢？像是 FireFox OR Opera 等都是，至於咱們常看見的 IE 6.0 及以下版本，其實我真的想要說 IE 全系列都很難算得上現代瀏覽器，好啦，回到話題，重點是以上兩個 CSS 屬性都不會被執行，因為 IE 看不懂，也不技援。所以之前處理這種事情，我們一般來說往往都會借助 Javascript，然後幫圖片加上 onload 事件。例如：


<img src="圖片名稱" onload="resizeImg(this)" />
<script type="text/javascript">
function resizeImg(obj) {
obj.width = obj.width > 50 && obj.width > obj.height ? 50 : auto;
obj.height = obj.height > 50 ? 50 : auto;
}
</script>


採用以上的方式是能解決問題，但是對以後網頁的管理會很麻煩，因為需要每張圖都要加上　onload ，麻煩也用了好些年了，但是隨著瀏覽器對 CSS 的支援越來越完善，終有一天你會跟我一樣把圖片上的 onload 事件統統刪掉。

這時就是 Expression 的出場的時候啦，因為 IE 有支援 Expression 在 CSS 的語法中放入一些判斷式，而這些判斷式又只有 IE 6.0 及以下版本才看得懂，所以把標準 CSS 寫入後再加上 Expression 應該就算是最好的決解方案了吧。

以下就是把大圖按比例縮小到 100px * 100px 以內，語法如下：


.thumbImage {
/* 這是標準 CSS 2.0 語法，可以限定最大寬度，即然有 max-width，那當然也就會有 min-width 囉！至於 max-height 使用方法當然也就相同囉 */
max-width: 100px;
max-height: 100px;
}
/* 加上 * 星號，這是 IE 專用，至於這個 CSS Hacks 的使用時機，我會另開一篇來說明 */
* html .thumbImage {
width: expression(this.width > 50 && this.width > this.height ? 50 : auto);
height: expresion(this.height > 50 ? 50 : auto);
}