how do I make images fit the browser and resize?

Question

I can't find how to make the image fit the browser as it it currently cropping it and resize with the browser

<div class="contentwrapper">
<img src="img/1.%20Self%20Branding%20display2.png">
</div>

.contentwrapper {
position: relative;
margin:0 auto;
width:97vw;
height: 100%;

}

Answer 1

Try using max-width and height.

img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}