How do I force WordPress thumbnails to stretch to fit if uploaded image if it has smaller dimensions?

Users on my site upload images that are less than my WordPress theme’s essential thumbnail dimensions. How can I force these types of images to stretch vertically or horizontally so there is no blank space?

My wp-admin>settings>media>thumbnail size is set to 124px x 156px. Uploaded images that are 60px x 190px destroy the website layout. www.sharehouse.co is the test site.
This code below is what needs to be altered.

<div class="post-left">
    <a href="<?php the_permalink(); ?>" <?php if ((get_option('cp_ad_image_preview') == 'yes') && (cp_get_image_url_raw($post->ID, 'large', 1) == true)) { ?>class="preview" rel="<?php echo cp_get_image_url_raw($post->ID, 'large', 1); ?>" <?php } ?>><?php if(get_post_meta($post->ID, 'images', true)) cp_single_image_legacy($post->ID, get_option('thumbnail_size_w'), get_option('thumbnail_size_h'), 'preview'); else cp_get_image_url_feat($post->ID, 'thumbnail', 'preview', 1); ?></a>                
</div>

Related posts

Leave a Reply

1 comment

  1. So, the first thing you need to do is strip the hardcoded width and height attributes from the img HTML that WordPress creates. It figures you should have those dimensions and forces you to use them.

    Taken from: https://wordpress.stackexchange.com/questions/5568/filter-to-remove-image-dimension-attributes

    add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
    add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
    
    function remove_thumbnail_dimensions( $html ) {
        $html = preg_replace( '/(width|height)="d*"s/', "", $html );
        return $html;
    }
    

    Then it’s just CSS

    .attachment img {
      width: 100%; /* scale to width of container, or whatever you want */
    }