wordpress使用jQuery调整图片宽高度

发布日期: 作者:冬镜SEO

  • 正文内容
  • 相关推荐
原创

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

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

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

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

jQuery调整图片宽高

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 库

请设置最大高度和宽度值在发布文章时要手动给每张图片添加一个class=”Thumbnail”属性

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

特别声明

本文为 冬镜SEO 原创发布,仅代表作者观点,不代表冬镜博客网的观点或立场,冬镜博客网仅提供信息发布平台,合作供稿、侵权删除、反馈建议请联系520@520xx.cc

分享SEO优化技术及网站优化教程,一个权威的SEO博客.

标签:

标题:wordpress使用jQuery调整图片宽高度

链接:https://uqseo.com/wordpress/58.html

版权:若无特殊标注皆为 冬镜SEO 原创版权,转载请以链接形式注明作者及原始出处

发表评论

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

评论

1条评论
  1. avatar

    iMJMJ Lv.6 Firefox 56.0 Firefox 56.0 Windows Windows 回复

    反复拜读了,理清了很多。

    广东省深圳市福田区 电信

    冬镜seo客服