调整网站大小时如何使图像放大[重复]答案

【问题标题】：How to make Image to zoom in when resizing window for a website [duplicate]调整网站大小时如何使图像放大[重复]
【发布时间】：2019-08-30 19:02:41
【问题描述】：

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

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

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

显示器的一半宽度

显示器全宽

【问题讨论】：

您是在说缩放，但您在描述和显示拉伸/（非均匀）缩放...Maybe try googling with the correct terms?
你必须使用百分比而不是绝对值来保持你的 CSS 高度和宽度，否则这种情况总会发生。我用来使一侧特定的技巧是将事物包装在另一个 div 中，并仅设置该外部 div 的高度或宽度。然后你会让另一边自动调整到与固定边相同的比例。

标签： html css image window-resize dynamic-resizing

【解决方案1】：

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

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

}

【讨论】：