Images in header element appear different sizes

Hi there,

Since you are using this CSS:

.page-hero #category_image img {
    vertical-align: bottom;
    max-height: 150px;
    min-width: 100px;
}

max-heightand min-width are both not "consistent" properties.

Maybe try width and height instead?

Hi there,
I've changed it to be just 'height: 100px;' and this looks good on this page but squashed on this page.

The problem is the image dimensions are going to be slightly different so I do not want to change the scaling but keep the ratio the same. What would be the best way for this?

What if you only use the max-width property only?

This article might be worth a read:
https://www.w3schools.com/css/css3_images.asp

That works a charm :) thank you.

I have one other small CSS regarding the header element, should I open up a new topic or push it here?

A new topic would be good.