Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

3 Answers 3

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.

share|improve this answer
1  
note you may need to use one of the regenerate thumbnail plugins for images uploaded prior to addition of said image size –  Tom J Nowell Mar 6 '12 at 23:51

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;}
share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.