两个图像相互重叠，具有响应行为和比例缩放

Question

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

我希望这些多张图像在响应和缩放方面表现得“像一个”，这样我仍然可以看到相同的整体图像，而与我的 window.

的大小无关

如果我在这里使用这个技巧：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

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

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

尺寸和百分比位置与 parent 元素的尺寸有关。在您的情况下，潜艇的 window 应定位为潜艇尺寸的百分比。你应该做的是将 window 作为 child 放入潜艇中。最简单的方法是使用 divs 和 background-images 并使用 background-size: 100% 使 background-images 与元素成比例。

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

#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>

两个图像相互重叠，具有响应行为和比例缩放

Two images on each other with responsive behavior and proportional scaling

javascript

css

scaling

image

responsive-design