图像更改或调整大小时的叠加问题答案

【问题标题】：Overlay issues when the image is changed or resized图像更改或调整大小时的叠加问题
【发布时间】：2023-01-12 17:12:12
【问题描述】：

我尝试仅使用纯 HTML 和 CSS 在图像顶部添加 UI 元素。这是预期的结果我的代码按预期工作，但有两个问题。以下是问题：

当我将图像更改为 Adobe Illustrator 时，UI 元素消失了

在某些时候背景图像不会响应，而 UI 元素在窗口放大时不断改变它的大小

知道我哪里出错了吗？这是我的尝试

.plane-container {
  position: relative;
  max-width:100%;
  max-height:100%;
}

.deck {
  display: flex;
}

.arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plane-container .overlay .main-deck {
  width: 67%;
  height: 23%;
  margin-top: 19.3%;
  margin-left: 16.5%;
  position: absolute;
}

.plane-container .overlay .lover-deck {
  width: 20.3%;
  height: 10%;
  margin-top: 27.2%;
  margin-left: 16.5%;
  position: absolute;
}

.plane-container .overlay .aft-deck {
  width: 16.7%;
  height: 10%;
  margin-top: 27.2%;
  margin-left: 55%;
  position: absolute;
}

.plane-container div img {
  position: relative;
  max-width:100%;
  max-height:100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="plane-container">
  <div class="overlay">
    <div class="main-deck deck">
      <div class="arrow" style="width: 5%;">
        <i class="fa fa-angle-left"></i>
      </div>
      <div style="background:blue; width: 90%; height: 100%;">
        
      </div>
      <div class="arrow" style="width: 5%;">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <div class="lover-deck deck">
      <div class="arrow" style="width: 10%;">
        <i class="fa fa-angle-left"></i>
      </div>
      <div style="background:red; width: 80%; height: 100%;">
        
      </div>
      <div class="arrow" style="width: 10%;">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
    <div class="aft-deck deck">
      <div class="arrow" style="width: 10%;">
        <i class="fa fa-angle-left"></i>
      </div>
      <div style="background:purple; width: 80%; height: 100%;">
        
      </div>
      <div class="arrow" style="width: 10%;">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>
  </div>
  <div>
    <!-- Image from Adobe Illustrator -->  
    <!-- <img src="https://i.postimg.cc/j5ggYMjt/from-ai.png" /> -->
    
    <!-- Original Image -->  
    <img src="https://i.postimg.cc/V6ypHG5T/red.png"/>
  </div>
</div>

这是JSFiddle链接

【问题讨论】：

标签： html css

【解决方案1】：

将此行添加到您的代码中，以修复当屏幕调整大小超过特定宽度时框未位于正确位置的问题：

.plane-container div img{
  width:100%;
}

【讨论】：