How to configure blog page to respect thumbnail image aspect ratio

Site URL: https://www.paulswilliams.me.uk/blog-1

I'm trying to present a series of square crop images from a recent workshop and use one of these images as the thumbnail image for the blog post. However, the default blog page crops the image, and also provides significant wasted whitespace above the blog post's title. 

Am I doing something silly? Can I adjust this with simple style parameters, or do I need to reset to custom CSS for what I'd have thought would be default behaviour?

Cheers!

Add to Design > Custom CSS

/* resize image */
section.blog-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}