html - 制作特色图片背景图片

Question

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

样式.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;

会做