How to make Image to zoom in when resizing window for a website

Question

I am currently making a website and I wish for the image to zoom in when resizing the browser window.

.image1 {
  width: 100%;
  height: 300px;
}

<div class="bookingtest">
  <div class="imgTESTBooki">
    <img class="image1" src="images/steering-wheel-2927406_960_720.jpg" alt="">
  </div>
  <div class="txtTESTBooki">
    <!-- <p>Book a test</p> -->
    <a href="bookingtest.html" class="Mbutton">Book a test</a>
  </div>
</div>

I would like the image to either zoom in or out of the picture depending on how the browser window is resized. I am particular stumped, since I do not know where to look next in order to have a cleaner image on the website, while resizing the window.

HALF WIDTH OF MONITOR

FULL WIDTH OF MONITOR

Answer 1

Just add responsiveness to your image through CSS:

.image1 {
width: 100%;
height: auto;

}