html - 当我调整浏览器窗口大小时，我的图像会调整大小以适合它，但如果我放大或缩小图像，图像会保持相同大小

Question

我该如何解决这个问题？图像设置为百分比，如果我设置高度百分比则没有任何反应。

相关html:

<div class="header">
   <img src="pictures/header.png" width="30%">
   </div>

该 div 的 Css:

.header {
margin: auto;
width: 70%;
padding: 1%;
text-align: center;
font-family: Arial, Helvetica, sans-serif,"serif";
font-size: 130%;
color: #e5e5e5;
background-color: #232323;

第二张图片的HTML:

<div class="main">
<h1> bla bla bla </h1>
<img class="right" src="bilder/wave.gif">
<p> bla bla bla </p>
</div>

提到的两个类的 Css:

.right{
    float: right;
    width: 15%;     
}

.main{ 
margin:auto;
width: 70%;
padding:1%;
align: center;
text-align:left; 
font-family: Arial, Helvetica, sans-serif,"serif";
color: #2b2b2b;
font-size: 130%;
background-color:rgba(178, 92, 42, 0.5);
background-image: url("../pictures/scroll.jpg");
background-size: 100%;
padding-bottom:2%;
}

Answer 1

当您放大时，不会影响窗口的高度/宽度，并且百分比单位基于高度/宽度工作，因此没有任何反应。

浏览器支持的缩放仅针对文本，因为字体大小使用像素单位。

尝试使用 px 设置固定宽度，然后放大并观察它的增长和缩小。