css to fit image by HEIGHT

Try giving your image a max-width instead of max height.

img
{
width:100%;
max-width:500px; /* this will stop it from expanding when you widen the browser
height:auto; /* height will automatically adjust to width.
}

You didn’t give any specifications on if you image is a square or nested in a square div, but if it’s a div, you can give the div a 100% width and a padding-bottom of 100% or 50% to make it a square. If this is the case please reply and I’ll be happy to help again

Here is a code pen
https://codepen.io/BramWerink/pen/GRpvgaB