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

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);
            }
        }
    });
}

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

转载请注明：汇站网 » WordPress 文章内容图像自适应调整大小的两种方法