调整网站窗口大小时如何放大图像

Question

我目前正在建立一个网站，希望在调整浏览器窗口大小时放大图像。

HTML代码：

<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>

CSS代码：

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

我希望图像可以放大或缩小图片，具体取决于调整浏览器窗口的大小。我特别感到沮丧，因为在调整窗口大小的同时，我不知道下一步该如何查看以便在网站上获得更清晰的图像。

一半的监视器宽度

完整的监视器宽度

Answer 1

只需通过CSS为图像添加响应度：

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

}