更改面板图像大小WordPress 2017主题

我有一个使用2017年主题的wordpress网站, 其中包含可嵌入其他页面之一的部分。我的博客页面的标题图像大小很大, 但是当我转到博客页面时, 主题将其截断为漂亮的横幅。因此, 在主页部分, 你必须滚动浏览大图像。

我想在首页的部分中显示截断的大小。我(我假设)如何修改主题来做到这一点？

当我检查元素时, 它是

<div class="panel-image" style="background-image: url(image_url);">
            <div class="panel-image-prop" style="padding-top: 100%"></div>
        </div>

仅供参考, 下面是主题Functions.php。

<?php
/**
 * Twenty Seventeen functions and definitions
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 */

/**
 * Twenty Seventeen only works in WordPress 4.7 or later.
 */
if ( version_compare( $GLOBALS['wp_version'], '4.7-alpha', '<' ) ) {
    require get_template_directory() . '/inc/back-compat.php';
    return;
}

/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which
 * runs before the init hook. The init hook is too late for some features, such
 * as indicating support for post thumbnails.
 */
function twentyseventeen_setup() {
    /*
     * Make theme available for translation.
     * Translations can be filed at WordPress.org. See: https://translate.wordpress.org/projects/wp-themes/twentyseventeen
     * If you're building a theme based on Twenty Seventeen, use a find and replace
     * to change 'twentyseventeen' to the name of your theme in all the template files.
     */
    load_theme_textdomain( 'twentyseventeen' );

    // Add default posts and comments RSS feed links to head.
    add_theme_support( 'automatic-feed-links' );

    /*
     * Let WordPress manage the document title.
     * By adding theme support, we declare that this theme does not use a
     * hard-coded <title> tag in the document head, and expect WordPress to
     * provide it for us.
     */
    add_theme_support( 'title-tag' );

    /*
     * Enable support for Post Thumbnails on posts and pages.
     *
     * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
     */
    add_theme_support( 'post-thumbnails' );

    add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );

    add_image_size( 'twentyseventeen-thumbnail-avatar', 100, 100, true );

    // Set the default content width.
    $GLOBALS['content_width'] = 525;

    // This theme uses wp_nav_menu() in two locations.
    register_nav_menus(
        array(
            'top'    => __( 'Top Menu', 'twentyseventeen' ), 'social' => __( 'Social Links Menu', 'twentyseventeen' ), )
    );

    /*
     * Switch default core markup for search form, comment form, and comments
     * to output valid HTML5.
     */
    add_theme_support(
        'html5', array(
            'comment-form', 'comment-list', 'gallery', 'caption', )
    );

    /*
     * Enable support for Post Formats.
     *
     * See: https://codex.wordpress.org/Post_Formats
     */
    add_theme_support(
        'post-formats', array(
            'aside', 'image', 'video', 'quote', 'link', 'gallery', 'audio', )
    );

    // Add theme support for Custom Logo.
    add_theme_support(
        'custom-logo', array(
            'width'      => 250, 'height'     => 250, 'flex-width' => true, )
    );

    // Add theme support for selective refresh for widgets.
    add_theme_support( 'customize-selective-refresh-widgets' );

    /*
     * This theme styles the visual editor to resemble the theme style, * specifically font, colors, and column width.
      */
    add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );

    // Load regular editor styles into the new block-based editor.
    add_theme_support( 'editor-styles' );

    // Load default block styles.
    add_theme_support( 'wp-block-styles' );

    // Add support for responsive embeds.
    add_theme_support( 'responsive-embeds' );

    // Define and register starter content to showcase the theme on new sites.
    $starter_content = array(
        'widgets'     => array(
            // Place three core-defined widgets in the sidebar area.
            'sidebar-1' => array(
                'text_business_info', 'search', 'text_about', ), // Add the core-defined business info widget to the footer 1 area.
            'sidebar-2' => array(
                'text_business_info', ), // Put two core-defined widgets in the footer 2 area.
            'sidebar-3' => array(
                'text_about', 'search', ), ), // Specify the core-defined pages to create and add custom thumbnails to some of them.
        'posts'       => array(
            'home', 'about'            => array(
                'thumbnail' => '{{image-sandwich}}', ), 'contact'          => array(
                'thumbnail' => '{{image-espresso}}', ), 'blog'             => array(
                'thumbnail' => '{{image-coffee}}', ), 'homepage-section' => array(
                'thumbnail' => '{{image-espresso}}', ), ), // Create the custom image attachments used as post thumbnails for pages.
        'attachments' => array(
            'image-espresso' => array(
                'post_title' => _x( 'Espresso', 'Theme starter content', 'twentyseventeen' ), 'file'       => 'assets/images/espresso.jpg', // URL relative to the template directory.
            ), 'image-sandwich' => array(
                'post_title' => _x( 'Sandwich', 'Theme starter content', 'twentyseventeen' ), 'file'       => 'assets/images/sandwich.jpg', ), 'image-coffee'   => array(
                'post_title' => _x( 'Coffee', 'Theme starter content', 'twentyseventeen' ), 'file'       => 'assets/images/coffee.jpg', ), ), // Default to a static front page and assign the front and posts pages.
        'options'     => array(
            'show_on_front'  => 'page', 'page_on_front'  => '{{home}}', 'page_for_posts' => '{{blog}}', ), // Set the front page section theme mods to the IDs of the core-registered pages.
        'theme_mods'  => array(
            'panel_1' => '{{homepage-section}}', 'panel_2' => '{{about}}', 'panel_3' => '{{blog}}', 'panel_4' => '{{contact}}', ), // Set up nav menus for each of the two areas registered in the theme.
        'nav_menus'   => array(
            // Assign a menu to the "top" location.
            'top'    => array(
                'name'  => __( 'Top Menu', 'twentyseventeen' ), 'items' => array(
                    'link_home', // Note that the core "home" page is actually a link in case a static front page is not used.
                    'page_about', 'page_blog', 'page_contact', ), ), // Assign a menu to the "social" location.
            'social' => array(
                'name'  => __( 'Social Links Menu', 'twentyseventeen' ), 'items' => array(
                    'link_yelp', 'link_facebook', 'link_twitter', 'link_instagram', 'link_email', ), ), ), );

    /**
     * Filters Twenty Seventeen array of starter content.
     *
     * @since Twenty Seventeen 1.1
     *
     * @param array $starter_content Array of starter content.
     */
    $starter_content = apply_filters( 'twentyseventeen_starter_content', $starter_content );

    add_theme_support( 'starter-content', $starter_content );
}
add_action( 'after_setup_theme', 'twentyseventeen_setup' );

/**
 * Set the content width in pixels, based on the theme's design and stylesheet.
 *
 * Priority 0 to make it available to lower priority callbacks.
 *
 * @global int $content_width
 */
function twentyseventeen_content_width() {

    $content_width = $GLOBALS['content_width'];

    // Get layout.
    $page_layout = get_theme_mod( 'page_layout' );

    // Check if layout is one column.
    if ( 'one-column' === $page_layout ) {
        if ( twentyseventeen_is_frontpage() ) {
            $content_width = 644;
        } elseif ( is_page() ) {
            $content_width = 740;
        }
    }

    // Check if is single post and there is no sidebar.
    if ( is_single() && ! is_active_sidebar( 'sidebar-1' ) ) {
        $content_width = 740;
    }

    /**
     * Filter Twenty Seventeen content width of the theme.
     *
     * @since Twenty Seventeen 1.0
     *
     * @param int $content_width Content width in pixels.
     */
    $GLOBALS['content_width'] = apply_filters( 'twentyseventeen_content_width', $content_width );
}
add_action( 'template_redirect', 'twentyseventeen_content_width', 0 );

/**
 * Register custom fonts.
 */
function twentyseventeen_fonts_url() {
    $fonts_url = '';

    /*
     * Translators: If there are characters in your language that are not
     * supported by Libre Franklin, translate this to 'off'. Do not translate
     * into your own language.
     */
    $libre_franklin = _x( 'on', 'Libre Franklin font: on or off', 'twentyseventeen' );

    if ( 'off' !== $libre_franklin ) {
        $font_families = array();

        $font_families[] = 'Libre Franklin:300, 300i, 400, 400i, 600, 600i, 800, 800i';

        $query_args = array(
            'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin, latin-ext' ), );

        $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
    }

    return esc_url_raw( $fonts_url );
}

/**
 * Add preconnect for Google Fonts.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param array  $urls           URLs to print for resource hints.
 * @param string $relation_type  The relation type the URLs are printed.
 * @return array $urls           URLs to print for resource hints.
 */
function twentyseventeen_resource_hints( $urls, $relation_type ) {
    if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) {
        $urls[] = array(
            'href' => 'https://fonts.gstatic.com', 'crossorigin', );
    }

    return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

/**
 * Register widget area.
 *
 * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
 */
function twentyseventeen_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( 'Blog Sidebar', 'twentyseventeen' ), 'id'            => 'sidebar-1', 'description'   => __( 'Add widgets here to appear in your sidebar on blog posts and archive pages.', 'twentyseventeen' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget'  => '</section>', 'before_title'  => '<h2 class="widget-title">', 'after_title'   => '</h2>', )
    );

    register_sidebar(
        array(
            'name'          => __( 'Footer 1', 'twentyseventeen' ), 'id'            => 'sidebar-2', 'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget'  => '</section>', 'before_title'  => '<h2 class="widget-title">', 'after_title'   => '</h2>', )
    );

    register_sidebar(
        array(
            'name'          => __( 'Footer 2', 'twentyseventeen' ), 'id'            => 'sidebar-3', 'description'   => __( 'Add widgets here to appear in your footer.', 'twentyseventeen' ), 'before_widget' => '<section id="%1$s" class="widget %2$s">', 'after_widget'  => '</section>', 'before_title'  => '<h2 class="widget-title">', 'after_title'   => '</h2>', )
    );
}
add_action( 'widgets_init', 'twentyseventeen_widgets_init' );

/**
 * Replaces "[...]" (appended to automatically generated excerpts) with ... and
 * a 'Continue reading' link.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param string $link Link to single post/page.
 * @return string 'Continue reading' link prepended with an ellipsis.
 */
function twentyseventeen_excerpt_more( $link ) {
    if ( is_admin() ) {
        return $link;
    }

    $link = sprintf(
        '<p class="link-more"><a href="%1$s" class="more-link">%2$s</a></p>', esc_url( get_permalink( get_the_ID() ) ), /* translators: %s: Name of current post */
        sprintf( __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title( get_the_ID() ) )
    );
    return ' &hellip; ' . $link;
}
add_filter( 'excerpt_more', 'twentyseventeen_excerpt_more' );

/**
 * Handles JavaScript detection.
 *
 * Adds a `js` class to the root `<html>` element when JavaScript is detected.
 *
 * @since Twenty Seventeen 1.0
 */
function twentyseventeen_javascript_detection() {
    echo "<script>(function(html){html.className = html.className.replace(/\bno-js\b/, 'js')})(document.documentElement);</script>\n";
}
add_action( 'wp_head', 'twentyseventeen_javascript_detection', 0 );

/**
 * Add a pingback url auto-discovery header for singularly identifiable articles.
 */
function twentyseventeen_pingback_header() {
    if ( is_singular() && pings_open() ) {
        printf( '<link rel="pingback" href="%s">' . "\n", esc_url( get_bloginfo( 'pingback_url' ) ) );
    }
}
add_action( 'wp_head', 'twentyseventeen_pingback_header' );

/**
 * Display custom color CSS.
 */
function twentyseventeen_colors_css_wrap() {
    if ( 'custom' !== get_theme_mod( 'colorscheme' ) && ! is_customize_preview() ) {
        return;
    }

    require_once( get_parent_theme_file_path( '/inc/color-patterns.php' ) );
    $hue = absint( get_theme_mod( 'colorscheme_hue', 250 ) );

    $customize_preview_data_hue = '';
    if ( is_customize_preview() ) {
        $customize_preview_data_hue = 'data-hue="' . $hue . '"';
    }
    ?>
    <style type="text/css" id="custom-theme-colors" <?php echo $customize_preview_data_hue; ?>>
        <?php echo twentyseventeen_custom_colors_css(); ?>
    </style>
    <?php
}
add_action( 'wp_head', 'twentyseventeen_colors_css_wrap' );

/**
 * Enqueues scripts and styles.
 */
function twentyseventeen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );

    // Theme stylesheet.
    wp_enqueue_style( 'twentyseventeen-style', get_stylesheet_uri() );

    // Theme block stylesheet.
    wp_enqueue_style( 'twentyseventeen-block-style', get_theme_file_uri( '/assets/css/blocks.css' ), array( 'twentyseventeen-style' ), '1.1' );

    // Load the dark colorscheme.
    if ( 'dark' === get_theme_mod( 'colorscheme', 'light' ) || is_customize_preview() ) {
        wp_enqueue_style( 'twentyseventeen-colors-dark', get_theme_file_uri( '/assets/css/colors-dark.css' ), array( 'twentyseventeen-style' ), '1.0' );
    }

    // Load the Internet Explorer 9 specific stylesheet, to fix display issues in the Customizer.
    if ( is_customize_preview() ) {
        wp_enqueue_style( 'twentyseventeen-ie9', get_theme_file_uri( '/assets/css/ie9.css' ), array( 'twentyseventeen-style' ), '1.0' );
        wp_style_add_data( 'twentyseventeen-ie9', 'conditional', 'IE 9' );
    }

    // Load the Internet Explorer 8 specific stylesheet.
    wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
    wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

    // Load the html5 shiv.
    wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );
    wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );

    wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix', get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ), array(), '1.0', true );

    $twentyseventeen_l10n = array(
        'quote' => twentyseventeen_get_svg( array( 'icon' => 'quote-right' ) ), );

    if ( has_nav_menu( 'top' ) ) {
        wp_enqueue_script( 'twentyseventeen-navigation', get_theme_file_uri( '/assets/js/navigation.js' ), array( 'jquery' ), '1.0', true );
        $twentyseventeen_l10n['expand']   = __( 'Expand child menu', 'twentyseventeen' );
        $twentyseventeen_l10n['collapse'] = __( 'Collapse child menu', 'twentyseventeen' );
        $twentyseventeen_l10n['icon']     = twentyseventeen_get_svg(
            array(
                'icon'     => 'angle-down', 'fallback' => true, )
        );
    }

    wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );

    wp_enqueue_script( 'jquery-scrollto', get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ), array( 'jquery' ), '2.1.2', true );

    wp_localize_script( 'twentyseventeen-skip-link-focus-fix', 'twentyseventeenScreenReaderText', $twentyseventeen_l10n );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );

/**
 * Enqueues styles for the block-based editor.
 *
 * @since Twenty Seventeen 1.8
 */
function twentyseventeen_block_editor_styles() {
    // Block styles.
    wp_enqueue_style( 'twentyseventeen-block-editor-style', get_theme_file_uri( '/assets/css/editor-blocks.css' ), array(), '1.1' );
    // Add custom fonts.
    wp_enqueue_style( 'twentyseventeen-fonts', twentyseventeen_fonts_url(), array(), null );
}
add_action( 'enqueue_block_editor_assets', 'twentyseventeen_block_editor_styles' );

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for content images.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param string $sizes A source size value for use in a 'sizes' attribute.
 * @param array  $size  Image size. Accepts an array of width and height
 *                      values in pixels (in that order).
 * @return string A source size value for use in a content image 'sizes' attribute.
 */
function twentyseventeen_content_image_sizes_attr( $sizes, $size ) {
    $width = $size[0];

    if ( 740 <= $width ) {
        $sizes = '(max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px';
    }

    if ( is_active_sidebar( 'sidebar-1' ) || is_archive() || is_search() || is_home() || is_page() ) {
        if ( ! ( is_page() && 'one-column' === get_theme_mod( 'page_options' ) ) && 767 <= $width ) {
            $sizes = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
        }
    }

    return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentyseventeen_content_image_sizes_attr', 10, 2 );

/**
 * Filter the `sizes` value in the header image markup.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param string $html   The HTML image tag markup being filtered.
 * @param object $header The custom header object returned by 'get_custom_header()'.
 * @param array  $attr   Array of the attributes for the image tag.
 * @return string The filtered header image HTML.
 */
function twentyseventeen_header_image_tag( $html, $header, $attr ) {
    if ( isset( $attr['sizes'] ) ) {
        $html = str_replace( $attr['sizes'], '100vw', $html );
    }
    return $html;
}
add_filter( 'get_header_image_tag', 'twentyseventeen_header_image_tag', 10, 3 );

/**
 * Add custom image sizes attribute to enhance responsive image functionality
 * for post thumbnails.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param array $attr       Attributes for the image markup.
 * @param int   $attachment Image attachment ID.
 * @param array $size       Registered image size or flat array of height and width dimensions.
 * @return array The filtered attributes for the image markup.
 */
function twentyseventeen_post_thumbnail_sizes_attr( $attr, $attachment, $size ) {
    if ( is_archive() || is_search() || is_home() ) {
        $attr['sizes'] = '(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px';
    } else {
        $attr['sizes'] = '100vw';
    }

    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'twentyseventeen_post_thumbnail_sizes_attr', 10, 3 );

/**
 * Use front-page.php when Front page displays is set to a static page.
 *
 * @since Twenty Seventeen 1.0
 *
 * @param string $template front-page.php.
 *
 * @return string The template to be used: blank if is_home() is true (defaults to index.php), else $template.
 */
function twentyseventeen_front_page_template( $template ) {
    return is_home() ? '' : $template;
}
add_filter( 'frontpage_template', 'twentyseventeen_front_page_template' );

/**
 * Modifies tag cloud widget arguments to display all tags in the same font size
 * and use list format for better accessibility.
 *
 * @since Twenty Seventeen 1.4
 *
 * @param array $args Arguments for tag cloud widget.
 * @return array The filtered arguments for tag cloud widget.
 */
function twentyseventeen_widget_tag_cloud_args( $args ) {
    $args['largest']  = 1;
    $args['smallest'] = 1;
    $args['unit']     = 'em';
    $args['format']   = 'list';

    return $args;
}
add_filter( 'widget_tag_cloud_args', 'twentyseventeen_widget_tag_cloud_args' );

/**
 * Get unique ID.
 *
 * This is a PHP implementation of Underscore's uniqueId method. A static variable
 * contains an integer that is incremented with each call. This number is returned
 * with the optional prefix. As such the returned value is not universally unique, * but it is unique across the life of the PHP process.
 *
 * @since Twenty Seventeen 2.0
 * @see wp_unique_id() Themes requiring WordPress 5.0.3 and greater should use this instead.
 *
 * @staticvar int $id_counter
 *
 * @param string $prefix Prefix for the returned ID.
 * @return string Unique ID.
 */
function twentyseventeen_unique_id( $prefix = '' ) {
    static $id_counter = 0;
    if ( function_exists( 'wp_unique_id' ) ) {
        return wp_unique_id( $prefix );
    }
    return $prefix . (string) ++$id_counter;
}

/**
 * Implement the Custom Header feature.
 */
require get_parent_theme_file_path( '/inc/custom-header.php' );

/**
 * Custom template tags for this theme.
 */
require get_parent_theme_file_path( '/inc/template-tags.php' );

/**
 * Additional features to allow styling of the templates.
 */
require get_parent_theme_file_path( '/inc/template-functions.php' );

/**
 * Customizer additions.
 */
require get_parent_theme_file_path( '/inc/customizer.php' );

/**
 * SVG icons functions and filters.
 */
require get_parent_theme_file_path( '/inc/icon-functions.php' );

也许这更有用, 面板模板php：

<?php
/**
 * Template part for displaying pages on front page
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

global $twentyseventeencounter;

?>

<article id="panel<?php echo $twentyseventeencounter; ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

    <?php
    if ( has_post_thumbnail() ) :
        $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

        // Calculate aspect ratio: h / w * 100%.
        $ratio = $thumbnail[2] / $thumbnail[1] * 100;
        ?>

        <div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
            <div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
        </div><!-- .panel-image -->

    <?php endif; ?>

    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

                <?php twentyseventeen_edit_link( get_the_ID() ); ?>

            </header><!-- .entry-header -->

            <div class="entry-content">
                <?php
                    /* translators: %s: Name of current post */
                    the_content(
                        sprintf(
                            __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ), get_the_title()
                        )
                    );
                    ?>
            </div><!-- .entry-content -->

            <?php
            // Show recent blog posts if is blog posts page (Note that get_option returns a string, so we're casting the result as an int).
            if ( get_the_ID() === (int) get_option( 'page_for_posts' ) ) :
                ?>

                <?php
                // Show three most recent posts.
                $recent_posts = new WP_Query(
                    array(
                        'posts_per_page'      => 3, 'post_status'         => 'publish', 'ignore_sticky_posts' => true, 'no_found_rows'       => true, )
                );
                ?>

                <?php if ( $recent_posts->have_posts() ) : ?>

                    <div class="recent-posts">

                        <?php
                        while ( $recent_posts->have_posts() ) :
                            $recent_posts->the_post();
                            get_template_part( 'template-parts/post/content', 'excerpt' );
                        endwhile;
                        wp_reset_postdata();
                        ?>
                    </div><!-- .recent-posts -->
                <?php endif; ?>
            <?php endif; ?>

        </div><!-- .wrap -->
    </div><!-- .panel-content -->

</article><!-- #post-<?php the_ID(); ?> -->

#1

CSS中的简单修复。刚刚更改：

    .panel-image {
        height: 100vh;
        max-height: 1200px;
    }

to

    .panel-image {
        height: 165px;
        max-height: 1200px;
    }