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

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

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

三種方法的效果比較

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

等比例調整圖片的高和寬

方法一：jQuery 代碼（薦）

現(xiàn)在大部分的網(wǎng)站都使用了 jQuery 庫，所以我們只需添加下面的 jQuery 代碼即可實現(xiàn)：

$(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>

實現(xiàn)效果和上面一樣，不需要引用 jQuery 庫，請設置最大高度和寬度值；在發(fā)布文章時，要手動給每張圖片添加一個 class=”Thumbnail”。

好了，今天課程到此為止，如果你有更好的方法，歡迎投稿分享！