fitting the thumbnail image into a div

Question

I want to get an uploaded image fitting 100% inside a div. The problem is that, the uploaded image has different size. For example, I uploaded an image and wordpress created an 150x150 thumbnail. I want to display that thumbnail into a div which is 200x150. It is okay that the image propotions will be distorted, but I am unable to do that. I am trying:

<?php the_post_thumbnail( array(200,150) ); ?>

It only shows 150x150.

PS. I don't want to add resize another copy of image using set_post_thumbnail_size. Instead I just want to make the thumbnail fit into a div by stretching it.

Answer 1

When setting the size of the image in an array using the_post_thumbnail as you are, the documentation states that the 'crop' feature does not work as of Wordpress 3.0. In order to accomplish what you want, you will need to do the following.

In your functions.php file, make a call to add_image_size, which allows you to specify both the dimensions of the image and whether or not it should be cropped.

//set image size
add_image_size( 'my-custom-size', 200, 150, true );

//use in theme
the_post_thumbnail( 'my-custom-size' );

Alternatively, you could just use CSS to set the size of the image, which will force it to distort and stretch to the desired size, but the Wordpress method below would be the correct way. NOTE: add_image_size() creates a copy of all images at the dimensions specified. It also only applies to newly uploaded images. Images already stored in the database are not affected.

Answer 2

Try

the_post_thumbnail( 'post-thumbnail', array('width'=>'200', height=>'200')  );

The second (optional) argument is an array of attribubes to be applied to the <img> tag.

Alternately, you could do this through css...

 .my-thumb-ctr img {width:200px;height:150px;}

Answer 3

Use this plugin to generate thumbnails dynamically. http://swiftthemes.com/swiftdynamicthumbs-plugin-to-generate-thumbnails-dynamically-when-needed/

Using this plugin, thumbnails will be generated with the exact dimensions you need, no distortions.

Answer 4

in functions.php:

function yourTheme_thumbnail($size) {
    if( has_post_thumbnail() ) {
        GLOBAL $post;

        // get thumbnail url with given size.
        $url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '$size' );

        // return it as an CSS property.
        $backgroundImage = 'background-image: url(' . $url[0] . ');';
        echo $backgroundImage;
    }
}

in the post loop:

LOOP START

<a href="<?php the_permalink() ?>">
    <div class="post-thumbnail" style="<?php yourTheme_thumbnail('medium') ?>">
        <h2 class="caption"><?php the_title() ?></h2>
    </div>
</a>

LOOP END

and at end, add following rules to your CSS:

.post-thumbnail {
    background-image: url(images/bg.png);
    background-color: rgba(0, 0, 0, .7);
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

and bg.png is a default image in case of no thumbnail set.