WordPress文章内容图像自适应调整大小的两种方法

2021-08-22 0 730 百度已收录

WordPress主题开发中的文章图像适配问题是一个普遍存在的问题。今天,优站网总结三种方法来帮助您解决手头的问题。除了CSS和jQuery的解决方案之外,没有其他创新方法。

推荐方法:使用官方默认的CSS样式
将以下代码复制并粘贴到theme style.css文件中
强制最大宽度为600px,高度为相对高度。以上设置是最佳解决方案

 

p img {
max-width:600px;
width: expression(this.width > 600 ? “600px” : true);
height:auto;
}

 

 

 

通过jQuery库进行图像自适应
首先,我们需要加载jquery库,然后将其添加到头中。WordPress主题中的PHP文件包含以下代码。
可以自动缩放图片,方法完美

$(document).ready(function(){
    $('div').autoResize({height:750});
});  
jQuery.fn.autoResize = function(options)
{
    var opts = {
        'width' : 700,
        'height': 750
    }
    var opt = $.extend(true, {},opts,options || {});
    width = opt.width;
    height = opt.height;
    $('img',this).each(function(){
        var image = new Image();
        image.src = $(this).attr('src');   if(image.width > 0 && image.height > 0 ){
            var image_rate = 1;
            if( (width / image.width) < (height / image.height)){
                image_rate = width / image.width ;
            }else{
                image_rate = height / image.height ;
            }
            if ( image_rate <= 1){
                $(this).width(image.width * image_rate);
                $(this).height(image.height * image_rate);
            }
        }
    });
}

 

 

可以说,这两种方法通过各自的方式达到了预期的效果。同时,对于大型开挖,建议使用第一种方法,因为对于不理解代码的学生来说,第二种方法相对昂贵。

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 WordPress WordPress文章内容图像自适应调整大小的两种方法 https://www.zhanceo.com/15175.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

WordPress文章内容图像自适应调整大小的两种方法-海报