wordpress使用jQuery调整图片宽高度

限制文章内容页中图片的最大宽度，以防止图片超出当前页面宽度造成横向滚动条通常用的多的方法就是在CSS中使用overflow:hidden 和 max-width:600px 来限制，但是效果不理想冬镜今天分享

限制文章内容页中图片的最大宽度，以防止图片超出当前页面宽度造成横向滚动条

通常用的多的方法就是在CSS中使用overflow:hidden 和 max-width:600px 来限制，但是效果不理想

冬镜今天分享一下比较完美的方法

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值以及最大宽度高度

二、纯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”属性