css - 在 CSS 中，如何在浏览器窗口宽度减小时缩放绝对定位的图像，同时保持其在其容器上的位置？

Question

我有一个 100% 宽度的 Div 和两个绝对定位的图像悬停在 Div (z-index:1;) 上，我的问题是，当用户减小浏览器窗口和 Div 宽度时相应地减少，因为某些元素在我的主题中有文本换行等，这意味着悬停图像保持在它们的绝对位置，而不是像 div 和页面的其他元素那样被推下页面。

我试图避免在我的 CSS 中使用 @media 来重新定位图像。

我试图在一张图片中展示它，但在三种不同的浏览器尺寸下。第一个屏幕截图应该是这样的，第二个屏幕是 width:1030px 左右，最后一个屏幕截图是 width:930px

Answer 1

事实上，我以为我已经尝试了所有方法，但是当我再次尝试将代码放入其中向你们展示时，我似乎偶然发现了这次有效的答案:

<div class="FrontPageBanner-1">
<h3>Lorem ipsum dolar sit amet</h3>
</br>
<span>Lorem ipsum dolar sit amet</span>
<img class="FrontPageBanner-1-Img-1" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/S200_Banner_Robot.png">
<img class="FrontPageBanner-1-Img-2" src="https://thailandpoolshop.com/wp-content/uploads/2018/07/wave_banner_robot.png">
</div>

CSS:

.FrontPageBanner-1 {
width:100%;
position:relative;
background: linear-gradient(to right, #48e2ff, #396fcf);
border-radius:10px;
}

.FrontPageBanner-1-Img-1 {
position:absolute;
width:280px;
left:21px;
top:-70px;
z-index:1;
width:280px;
max-width:280px\9;
}

.FrontPageBanner-1-Img-2 {
position:absolute;
width:26%;
right:23px;
top:-47px;
z-index:1;
width:280px;
max-width:280px\9;
}

所以我想我会把它添加到我的 CSS 而不是为了快速示例目的将它放在我的代码中。我看到的唯一一个小问题是，当使用 max-width:280\9; 时，图像的收缩速度仍然不如主题 @media (max-wdith:xxxx) 确实如此。