AIDE技术官网
AIDEZY.COM

wordpress使用jQuery调整图片宽高度教程

AIDE技术网-aidezy.com
wordpress使用jQuery调整图片宽高度教程

wordpress使用jQuery调整图片宽高度教程

前言:

今天AIDE技术网来谈谈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使用jQuery调整图片宽高度教程|正文

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

搜一下

赞(0) 打赏
AIDE技术网-aidezy.com 广告
AIDE技术网-aidezy.com 广告

来都来了!评论一下呗! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册