Identical images not all responding the same to different screen sizes

Hi all, I have an issue where not all identical images on a page are responding the same to different screen sizes. I am using a series of circle designs on this website and all images are identical size and shape from the same image file. But some of those images render at a larger sizes than the others in mid-sized screens such as 13-15inch laptops. I want the smaller image size to render. See the screenshot example. 

The images are all in the same section on a 7.1 site, so grid settings are the same for all images.

Any ideas as to why this is happening?  

Can you share your website URL and this page?

Of course here it is: https://www.hardcorehumanperformance.com.au/coaching-mentoring-leadership-performance

I had aded the link when posting to the forum, but it is then not shared in the published post  . . .

16 minutes ago, Ziggy said:

The images are being constrained by the grid height, that doesn't always stay consistent as it stretches to fit text content. You can see here what's going on:

This is partly happening because you have the titles in separate text blocks, but could also be fixed by having an image that is smaller than the block (align top/right), and making the image block larger so when the rows/columns stretch/squash then it doesn't change the size of the image.

aha! that makes sense now, thank you for pointing it out. I had assumed the tiles broke across two different grid lines. 

I think there will be a bit of trial and error involved in getting the image size and block right so that it stays the same size when rows/columns stretch. Or, do you have a ready formula for working that out? 

Thanks for your help!

45 minutes ago, Callan said:

Or, do you have a ready formula for working that out? 

Not exactly, but if you resized the image to 32x32px (or similar) and re-uploaded the image for each instance, then made the image block larger, it would keep the size consistent.