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

Question

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

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

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

左右

Answer 1

给出水池清洁部分的相对位置，获取该水池清洁部分内的两个绝对元素，并给出相对于两侧的百分比绝对位置。如果您显示您的代码会很有帮助。

试试这个： <a href="https://jsfiddle.net/varinders0hal/ye9whLso/8/" rel="nofollow noreferrer">Here</a>

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;
}

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

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

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

In CSS how can I scale an absolute positioned image while keeping its position over its container while browser window width decreases?

css

wordpress

position

width