Dynamicly downsize an image

So I've got a large image 3000x2000 roughly and I want to span it across my website so it fills 100% width but stays the same proportions, but if I were to shrink the screen the image would resize automatically keeping the same proportions and no overflow scrolling.

<div class="row anfield">
    <img src="../Images/Anfield.jpg" />
</div>

.row{
width:100%;
display:flex;
flex-wrap:wrap
}

I have tried max-width / width 100% in the css anfield but neither worked.

<img style="max-width:100%" src="../Images/Anfield.jpg" />

This changes the width to 100% but doesn't resize the height accordingly.