代码之家 › 专栏 › 技术社区 › Dayley

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

width position wordpress css

Dayley · 技术社区 · 6 年前

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

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

我曾尝试在一张图片中显示这个,但是在三种不同的浏览器大小下。第一个屏幕截图是它应该的样子,第二个屏幕大约是 width:1030px 并且最后一个屏幕截图大约是 width:930px


   
    
     
      
       
        
         
          
          .
         
         
          
          
         
        
        
         
          我尽量避免使用
          
           @media
          
          在我的CSS中重新定位图像。
         
        
        
         
          我曾尝试在一张图片中显示这个,但是在三种不同的浏览器大小下。第一个屏幕截图是它的外观,第二个屏幕在附近
          
           width:1030px
          
          最后的截图就在附近
          
           width:930px

2 回复 | 直到 6 年前

Dayley 6 年前

事实上,我以为我已经尝试了所有的方法,但是当我再次尝试把代码放进去给你们看的时候,我似乎无意中发现了这个答案,这一次是可行的:

<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) 做。

Varinder Sohal 6 年前

给出游泳池清洗部分的相对位置,取游泳池清洗部分内的两个绝对元素,并从各边以百分比给出绝对位置。不过,如果您显示您的代码,这会很有帮助。

试试这个: Here