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

Question

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

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

我尝试将其显示在一张图片中，但使用三种不同的浏览器大小。第一个屏幕截图是它的外观，第二个屏幕是width:1030px左右，最后一个屏幕是width:930px

Answer 1

给出相对于池清洁区的相对位置，将池清洁区内的两个绝对元素都取下来，并从各个侧面以百分比给出绝对位置。尽管显示代码会有所帮助。

尝试一下： Here

Answer 2

事实上，我以为我已经尝试了一切，但是当试图再次将代码放给大家看时，我似乎偶然发现了这次有效的答案：

<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)那样快。