Featured Image Thumbnail Sizing

Question

The image on the left is what it is currently looking like. I used developer tools to change the width & height of all the image fields for the image on the right, however I would like some sort of cropping to get a similar effect without the scaling issues. My code is below.

 <div class="thumb">
              <?php the_post_thumbnail(153, 115, true); ?> 
 </div>
.inner .thumb {
     width: 153px;
     height: 115px;
     overflow: hidden;
}

Answer 1

I've approached this problem in a few different ways, here's some ideas:

1. Just grad the medium sized thumbnail with the_post_thumbnail('medium'); (or any defined size that is bigger than what you want displayed), and apply a .inner .thumb img {width: 153px; height: auto;} css rule. If it's too tall it will get cropped from your overflow:hidden; on the container. This will cause css based image scaling, but maybe that's fine.
2. You could use wp_get_attachment_image_src to get an array with the image's height and width and use some mathematics with the ratio you want to resize or crop the image using php's image processing functions... this seems messy and overkill
3. Set your default thumbnail size in wordpress's media settings to 153x115 and use the proportional option. Like answer 1, this the excess will get cropped off by your container, you're just letting wordpress resize the image for you instead of css