WordPress实现特色图片点击后全屏自适应显示

我正在维护一个有20多年历史的WordPress博客，所有文章的特色图片（Featured Image）都设置为可点击状态。但大部分图片是1999年的标准尺寸，宽度仅640px，点击打开原图时，显示效果比主题缩略图还小。我需要实现点击后图片按原始比例最大化显示：横屏图填满屏幕宽度，竖屏图填满屏幕高度，同时保持垂直和水平居中。

我已经通过代码实现了特色图片点击后在Lightbox中打开，但不知道如何修改代码让图片全屏适配。本人不擅长代码，希望能用CSS实现，或者了解如何整合现有代码。已添加的代码如下：

add_action('wp_footer', 'dbc_open_featured_image_in_lightbox');
add_action('wp_enqueue_scripts', 'dbc_featured_image_in_lightbox_register_magnific_popup', 11); // Load Magnfic Popup (priority > 10 to avoid triggering Divi's child theme detection)
if (!function_exists('dbc_open_featured_image_in_lightbox')) {
function dbc_open_featured_image_in_lightbox() {
    ?>
    <script>
    jQuery(function($){
        $featured_img = $('body.single article.post .et_post_meta_wrapper > img');
        $featured_img.wrap('<a class="et_pb_lightbox_image"></a>');
        $featured_img.each(function(){
            var img_url = $(this).attr('src');
            <?php if (apply_filters('dbc_open_featured_image_in_lightbox_use_fullsize_image', false)) { ?>
                img_url = img_url.replace(/-\d+x\d+(?=\.(png|jpe?g|gif|bmp|webp))/i, '');
            <?php } ?>
            $(this).parent().attr('href', img_url);
        });
    });
    </script>
    <?php
}
}

function dbc_featured_image_in_lightbox_register_magnific_popup() {
        if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
    wp_enqueue_style('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
    wp_enqueue_script('dbc-featured-image-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);
}

1. 确保Lightbox加载原图 #

你当前代码里有个开关默认关闭了原图加载，把false改成true，Lightbox就会调用不带尺寸后缀的原图（比如去掉-640x480这类缩略标识），而不是压缩后的小图。修改后的代码如下：

add_action('wp_footer', 'dbc_open_featured_image_in_lightbox');
add_action('wp_enqueue_scripts', 'dbc_featured_image_in_lightbox_register_magnific_popup', 11); // Load Magnfic Popup (priority > 10 to avoid triggering Divi's child theme detection)
if (!function_exists('dbc_open_featured_image_in_lightbox')) {
function dbc_open_featured_image_in_lightbox() {
    ?>
    <script>
    jQuery(function($){
        $featured_img = $('body.single article.post .et_post_meta_wrapper > img');
        $featured_img.wrap('<a class="et_pb_lightbox_image"></a>');
        $featured_img.each(function(){
            var img_url = $(this).attr('src');
            <?php if (apply_filters('dbc_open_featured_image_in_lightbox_use_fullsize_image', true)) { ?>
                img_url = img_url.replace(/-\d+x\d+(?=\.(png|jpe?g|gif|bmp|webp))/i, '');
            <?php } ?>
            $(this).parent().attr('href', img_url);
        });
    });
    </script>
    <?php
}
}

2. 用CSS实现全屏自适应显示 #

把这段CSS添加到主题的自定义CSS面板（外观→自定义→额外CSS）里，就能让图片按比例铺满屏幕并居中：

/* 强制Lightbox图片按比例自适应全屏 */
.mfp-img-container .mfp-img {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: auto !important;
    height: auto !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 优化Lightbox容器和背景 */
.mfp-container {
    padding: 0 !important;
}

.mfp-bg {
    background: #000 !important;
    opacity: 0.9 !important;
}

生效说明 #

• 修改代码后，Lightbox会加载图片的原始文件，确保用的是最大尺寸的图；
• CSS会自动判断图片横竖：横图占满屏幕宽度，竖图占满屏幕高度，同时保持居中，不会拉伸变形；
• 直接替换原函数里的false为true，再粘贴CSS即可，不需要改其他代码。

内容的提问来源于stack exchange，提问作者JustJo