WordPress 使用 jQuery 按比例調整圖片高度/寬度

同學們，今天我們來談談 WordPress 主題製作的細節問題：限制文章中圖片的最大寬度，防止圖片「撐破」頁面，用的比較多的方法是在 CSS 中使用 overflow:hidden
和 max-width:600px 來限制，但是效果不理想，倡萌今天分享一下比較完美的方法： jQuery 按比例調整圖片高度/寬度。

2013-4-14 更新：使用 max-width 也是可以按等比縮小圖片的。以前倡萌之所以任務無法實現，是因為我自己使用 WLW 離線釋出時，使用 WLW 定義了圖片的格式，而沒辦法繼承樣式表的樣式。特此說明，希望大家不要被誤導！

三種方法的效果比較

wpdaxue.com-201210074

從上圖可以看出，overflow 僅僅是隱藏了部分圖片，導致圖片顯示不全；~~max-width 只是限制的最大寬度，圖片壓縮變形~~；而 jQuery 卻可以等比例調整圖片的高和寬，圖片沒有變形，這就是我們要的效果！

等比例調整圖片的高和寬

方法一：jQuery 程式碼（薦）

現在大部分的網站都使用了 jQuery 庫，所以我們只需新增下面的 jQuery 程式碼即可實現：

```
$(document).ready(function() {
```
```
    $('.post img').each(function() {
```

    var maxWidth = 600; // 圖片最大寬度

    var maxHeight = 2000;    // 圖片最大高度

```
    var ratio = 0;  // 縮放比例
```

    var width = $(this).width();    // 圖片實際寬度

    var height = $(this).height();  // 圖片實際高度

```
    // 檢查圖片是否超寬
```
```
    if(width > maxWidth){
```

        ratio = maxWidth / width;   // 計算縮放比例

        $(this).css("width", maxWidth); // 設定實際顯示寬度

        height = height * ratio;    // 計算等比例縮放後的高度

        $(this).css("height", height * ratio);  // 設定等比例縮放後的高度

```
    }
```
```
    // 檢查圖片是否超高
```
```
    if(height > maxHeight){
```

        ratio = maxHeight / height; // 計算縮放比例

        $(this).css("height", maxHeight);   // 設定實際顯示高度

        width = width * ratio;    // 計算等比例縮放後的高度

        $(this).css("width", width * ratio);    // 設定等比例縮放後的高度

```
    }
```
```
    });
```
```
});
```

實際使用時，注意修改 $('.post img') 為你文章內容的 class 值，以及最大寬度、高度。

關於 jQuery 庫，請閱讀《WordPress 提速：選擇好的 jQuery 庫 (Google/Microsoft/SAE) 》

方法二：純 Javascript 程式碼

```
<script type="text/javascript">
```

function ResizeImage(image, 插圖最大寬度, 插圖最大高度)

```
{
```
```
    if (image.className == "Thumbnail")
```
```
    {
```
```
        w = image.width;
```
```
        h = image.height;
```
```
        if( w == 0 || h == 0 )
```
```
        {
```
```
            image.width = maxwidth;
```
```
            image.height = maxheight;
```
```
        }
```
```
        else if (w > h)
```
```
        {
```

            if (w > maxwidth) image.width = maxwidth;

```
        }
```
```
        else
```
```
        {
```

            if (h > maxheight) image.height = maxheight;

```
        }
```

        image.className = "ScaledThumbnail";

```
    }
```
```
}
```
```
</script>
```

實現效果和上面一樣，不需要引用 jQuery 庫，請設定最大高度和寬度值；在釋出文章時，要手動給每張圖片新增一個 class=」Thumbnail」。

WordPress 使用 jQuery 按比例調整圖片高度/寬度