How to make thumbnail image fit into a div where image dimentions are completely different?

Question

I defined a div which is 200px * 200px for my thumbnails using the code below in my index.php file:

<ul> <?php
    $my_query = new WP_Query('showposts=10&cat=3');
    while ($my_query->have_posts()): $my_query->the_post(); $do_not_duplicate = $post->ID;?> 
    <div id="posts">
    <div id="post-thumbnail">
    <?php the_post_thumbnail( 'post-thumbnail'); ?>
    </div>
    <div id="post-content">
    </div>
    <div id="post-tags">
     <li>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
    </div>
    </div>
    <?php endwhile; ?> 
</ul>

And in my functions.php file I have defined the 200px * 200px size for my thumbnail like below:

if (function_exists('add_image_size')){
add_image_size( 'post-thumbnail', 200, 200,true);
}

Up to here, everything is allright but one of my images is not shown correctly; It fits in width but not in height. The actual size of the image is 1920*1080. Besides other images which are 1920*1200, fit correctly both in width and height.

On the other hand, this issue happens only for some images as I have used images frome the same dimentions(1920*1080) and they fit correctly.

I searched a lot to fix this issue but I was unsuccessful, Please help me.

Thanks.

Answer 1

It may be that some of your images were uploaded before you created the custom image size function. If that's the case, a plugin like Force Regenerate Thumbnails will solve your problem.

Alternatively, for more versatility you could use the images as backgrounds, like so:

<div style="background-image: url(<?php the_post_thumbnail_url(); ?>)" id="post-thumbnail"></div>

and set the background size for #post-thumbnail to cover.