具有响应行为和比例缩放的两个图像

Question

我想在 HTML/CSS/javascript 中做一些非常标准的事情，但不知何故我现在没有找到任何解决方案：我希望多个图像相互叠加，其中一些是可点击的。例如： submarine with red circle button as window 在这种情况下，潜艇是一个 img，红色圆圈是一个 input type="image"，用作按钮。

我希望这些多张图像在响应性和缩放方面表现得“一致”，这样我仍然可以看到相同的整体图像，而与我的窗口大小无关。

如果我在这里使用这个技巧：How do I position one image on top of another in HTML? 并使两个图像都具有响应性，那么圆圈不会与潜艇同时缩小。此外，由于红色圆圈以absolute 的方式定位，因此它与潜艇的位置不同。

这是我当前的代码：

    .div{
    position: relative;
    }

    .responsive {
      max-width: 100%;
    }
    
    #test2 {
    width: 12.3%;    
    position:absolute;
    z-index: 2;
    left: 73%;
    top: 62%;
    }
    
    #test
    {
      width: 100%;    
      position:relative;
      z-index: 1;
    }

<div>
      <img src="/submarine.png" id="test" class="responsive" />
      <input type="image" src="/red_circle.png"  id="test2" class="responsive" />
</div>

Answer 1

为了实现这一点，您可以使用百分比，因此如果您减小窗口的比例，图像的大小也会随之减小。

CSS：

.submarine {
  width: 30%;
  height: 55%;
  position: relative;
}

.redDot {
  width: 2%;
  position: absolute;
}

HTML：

<div>
  <img src="submarine.jpg" clas="submarine">
  <img src="redDot.png" class="redDot">
</div>

然后用其他边距来定位潜艇中的红点。

Answer 2

百分比的尺寸和位置与父元素的尺寸有关。在您的情况下，潜艇的窗口应定位为潜艇尺寸的百分比。要做到这一点，你应该做的就是把窗户小时候放在潜艇里。最简单的方法是使用带有背景图像的 div 并使用 background-size: 100% 使背景图像随元素缩放。

您也可以使用“padding-bottom 技巧”将 div 的“高度”设置为父级宽度的百分比。

#submarine {
  background: yellow;
  width: 30%;
  padding-bottom: 20%;
  position: absolute;
  left: 20%;
  top: 20%;
 }
 
 #window{
   position: absolute;
   background: red;
   width: 20%;
   padding-bottom: 20%;
   right: 5%;
   top: 40%;
   background: red;
 }

<div id="submarine">
  <div id="window"></div>
</div>