wordpress使用jQuery调整图片宽高度

  • 内容
  • 相关
今天凉一SEO来谈谈Wordpress主题制作的细节问题 

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

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

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

jQuery调整图片宽高度

20180417008.jpg

wordpress使用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 库 
20180417008.jpg
请设置最大高度和宽度值在发布文章时要手动给每张图片添加一个class=”Thumbnail”属性

本文标签:

版权声明:若无特殊注明,本文皆为《凉一》原创,转载请保留文章出处。

本文链接:wordpress使用jQuery调整图片宽高度 - http://ly888.cn/wordpress/29.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注