custom_post_thumbnail() with size detection. It will fill up space by checking the image's orientations.
.post-thumbnail {
height: 224px;
overflow: hidden;
position: relative;
span.blackbg {
background: rgba(0, 0, 0, 0.04);
width: 100%;
height: 100%;
position: absolute;
display: block;
left: 0;
z-index: 1;
}
img {
height: 224px;
left: 50%;
max-width: none;
top: 50%;
@include translate(-50%,-50%);
position: absolute;
width: auto;
}
&.portrait img {
height: auto;
width: 100%;
}
}
function custom_post_thumbnail() {
if ( '' !== get_the_post_thumbnail() ) :
$image_arr = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'large');
$image_url = $image_arr[0];
if ($image_arr[1] > $image_arr[2]) {
$getimagesize = "landscape";
} else {
$getimagesize = "portrait";
}
echo "<div class='post-thumbnail ".$getimagesize."'>";
the_post_thumbnail( 'large' );
echo "</div>";
endif;
}