javascripthtmlwordpressfullscreenwordpress-featured-image

How to make featured image full width

I am trying to make the featured image full width in my wordpress theme. I want it so that when you go to the individual posts page the featured image is full width at the top. (similar to (http://www.fashionmumblr.com/2016/12/12-days-vlogmas-giveaways.html) Does anyone have any suggestions for how I could achieve this? I don't even know where to start. Can I make the image full width using add_image_size?

Right now I have my banner-image size 1500X695 but I want to make it full width on any screen size

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

Here is my 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();

?>
Solution

  • Why not specify a large amount of pixels and then style the image in your CSS using percentage values: HTML

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

    CSS

    .image img {
    width:100%;
}