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

Question

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

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

我希望图像放大或缩小图片，具体取决于浏览器窗口的大小调整方式。我特别难过，因为我不知道下一步该往哪里看才能在网站上获得更清晰的图像，同时调整窗口大小。

显示器的一半宽度

显示器全宽

Answer 1

只需通过 CSS 为您的图像添加响应能力：

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

}