wordpress使用jQuery调整图片宽高度

今天重庆SEO来谈谈Wordpress主题制作的细节问题

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

通常用的多的方法就是在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”属性

好了今天的教程到这里结束，如果你有好了wordpress源码插件欢迎来投稿