javascript - 如何使特色图像全宽

Question

我正在尝试在我的 wordpress 主题中使特色图片全宽。我想要它，以便当您转到单个帖子页面时，特色图像在顶部是全宽的。（类似于（http://www.fashionmumblr.com/2016/12/12-days-vlogmas-giveaways.html）有人对我如何实现这一点有任何建议吗？我什至不知道从哪里开始。我可以使用 add_image_size 使图像全宽吗？

现在我的横幅图像尺寸为 1500X695，但我想在任何屏幕尺寸上使其全宽

        add_image_size('banner-image', 1500, 695, true);

这是我的 single.php

<?php
get_header();
the_post_thumbnail('banner-image');
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">

<?php wpb_set_post_views(get_the_ID()); ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();

?>

Answer 1

为什么不指定大量像素，然后使用百分比值在 CSS 中设置图像样式： HTML

<div class="image"><?php the_post_thumbnail( array( 800, 800 ) ); ?></div>

CSS

.image img {
    width:100%;
}