我正在开发一个网站，该网站的部分一侧有文本，另一侧有背景图像。在某一部分一切工作正常。当我调整浏览器大小时，背景图像会响应并缩小。但在下一部分中，背景图像没有响应，当我调整浏览器大小时，图像实际上变大，我不知道为什么。 （我只学习了大约一个月的编码，所以我希望答案是显而易见的）
这是有效部分的 css：
#welcome {
margin-top: 34px;
padding-top: 0px;
padding-bottom: 0px;
height: 120vh;
background-color: #dae7e9;
}
#welcome .box1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 55%;
height: 120vh;
}
#welcome .box2 {
width: 45%;
overflow: hidden;
background-image: url("https://i.ibb.co/c6txf7Y/Gabriel-Venneri1-3.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
这是没有的部分的 css：
#about {
background-color: #5d5c61;
}
#about h1 {
color: #123c69;
margin-bottom: 0;
}
#about .box1 {
width: 40%;
background-image: url("https://i.ibb.co/k6mNw42/IMG-6333-2.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
#about .box2 {
width: 60%;
}
HTML：
<section id="about">
<div class="container-1">
<div class="box1"></div>
<div class="box2">
<h1>About</h1>
<p>Text</p>
</div>
</div>
</section>
我已经尝试寻找解决方案一个半星期了，因此我们将不胜感激
这里是该网站的链接，“关于”部分的图像是问题：https://codepen.io/gvenn/full/XWNzeqW
造成这种行为差异的主要原因是在第一部分中使用了 flex，而第二部分仍然默认为 display: block
块级元素，即使宽度减小，也不希望与另一个块级元素并排出现，即使容器宽度允许这种情况发生（在您的情况下 40% + 60% 应该有效，但不会）
虽然您始终可以切换到 Flex 并实现这一点，但既然您发布了这个问题，我假设您不想使用 Flex。在这种情况下，您可以在两个子 div 上设置 display: inline-block 并且它们会同意并排显示
但有几点注意事项： 你不能使用 40+60%，因为有边界和其他东西阻碍。所以我改成58% 您需要为图片指定 box1 的高度。要么明确地将其设置为 200px 或其他值，要么使用图像的纵横比指定纵横比属性。由于您已经指定了 box1 容器的宽度，因此高度将根据纵横比自动计算。 我使用 Vertical-align: middle 将文本居中于图片，但这是可选的。 您还可以在 box1 上使用 float: left 来绕过默认行为并使图像“浮动”到左侧。我在下面的示例中没有使用它。
<head>
<style>
#about {
background-color: #5d5c61;
}
#about h1 {
color: #123c69;
margin-bottom: 0;
}
#about .box1 {
width: 40%;
aspect-ratio: 3/4;
background-image: url("https://i.ibb.co/k6mNw42/IMG-6333-2.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
#about .box2 {
width: 58%;
}
#about .box1,
#about .box2 {
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<section id="about">
<div class="container-1">
<div class="box1"></div>
<div class="box2">
<h1>About</h1>
<p>Text</p>
</div>
</div>
</section>
</body>