时间戳

首页 > 解决方案 > 具有响应行为和比例缩放的两个图像

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

问题描述

在此处输入图像描述我想我想在 HTML/CSS/javascript 中做一些非常标准的事情，但不知何故我现在没有找到任何解决方案：我想在彼此上有多个图像，其中一些是可点击的。例如： 带有红色圆圈按钮的潜艇在这种情况下，潜艇是一个图像，红色圆圈是一个input type="image"作为按钮工作的按钮。

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

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

标签： javascriptcssimageresponsive-designscaling

解决方案

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

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>

然后使用其他边距将红点定位在潜艇中。

推荐阅读