CODEWITHSUNDEEP
javascriptcsswordpress
user3550879
user3550879

Reputation: 3469

Responsive full-width Wordpress post image

I have a Wordpress site and the images in my posts force the width of my site, breaking it when it's mobile sized. Looking for code to make the Wordpress post images full width (with auto height to maintain proportions) based on container size.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<div class="container">

            <?php the_content();?>

</div>

<?php endwhile; ?>
<?php endif; ?>

EDIT

function theme_content_image_sizes_attr( $sizes, $size ) {
$width = $size[0];

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

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

Upvotes: 1

Views: 1536

Answers (1)

nanika
nanika

Reputation: 91

Just a suggestion, maybe you can use the featured image as a background so you can control the width and height.

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); ?>

<div class="header-wrap" style="background-image: url('<?php echo $backgroundImg[0]; ?>')">
</div>

.header-wrap {
   background-repeat: no-repeat;
   background-size: cover;
   padding: 80px 0;
}

Upvotes: 1

Related Questions