制作特色图片背景图片

Question

在我的 wordpress posts 上，我想在页面顶部添加 post 缩略图，使其全宽。我希望它覆盖页面的整个宽度，当页面变大时，图像会被裁剪或放大。（类似于此 https://www.inthefrow.com/2016/10/3-amazing-places-eat-mykonos.html）我下面的代码是一个正在进行的工作。它可以使图片成为背景图片，但不是全宽。它只会是图片的宽度。我将不胜感激任何帮助。提前致谢。

style.php

<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
    
    
        <?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
    
    
    
<?php wpb_set_post_views(get_the_ID()); ?>    
    <div class="post-info">    
    <h1 class="post-title"><?php the_title(); ?></h1>
   <h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>

    </div>
    <div class="post-content"><?php the_content(); ?></div>
    <div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
        <div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">follow by email'</a></h2></div></div>
 <?php get_template_part( 'prevandnextpost' ); ?>
     <?php get_template_part( 'related-posts' ); ?>

<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
 
?>

css

.banner {
      max-width: 100%;
    width:100%;
        height:700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 1

background-size: cover;

会做

Answer 2

请确保 wordpress 正在检索全宽图像路径。 Post 缩略图应为全尺寸。检查相同的彻底检查元素图像 url 'Open in new tab'.

制作特色图片背景图片

Make featured image background image

html

css

wordpress

background

background-image