html - 相对于容器中父图像的缩放，如何缩放/移动容器中的子图像？

Question

我在一个容器中有一个父亲图像，并且在该图像顶部有几个具有绝对位置的可点击图标。

我现在想将父亲图像缩放到最大宽度:100%

现在我希望以绝对位置放置的图标根据父图像表现出相对行为，以便它们始终位于父图像上的同一位置。

到目前为止，这是我的代码:

.container {
  position: relative;
  top: 0;
  left: 0;
}

.father-image {
  position: relative;
  top: 0;
  left: 0;
}

.icon_pos {
  position: absolute;
  top: 50px;
  left: 50px;
}

.icon {
  width: 20em;
  height: 5em;
  background: url("icon.png") no-repeat;
  background-size: 20em;
  display: fill;
}

.icon:hover {
  width: 20em;
  height: 5em;
  background: url("icon_hover.png") no-repeat;
  background-size: 20em;
}

<div class="container">
  <img class="father-image" src="father-image.png">

  <div class="icon_pos">
    <a href="SOME_LINK">
      <div class="icon"></div>
    </a>
  </div>
</div>

此代码按预期工作。显示父像，图标在50/50位置，可点击。

不，我想将父亲图像缩放到 100%(将“最大宽度:100%”添加到类“父亲图像”)。如果我这样做，图像在屏幕上完全可见，但图标保持在 50/50，这不是所需的行为，因为它也应该相对于父图像移动/缩放。

有没有人有想法？

Answer 1

如果我没看错你只需要将“.icon_pos”位置设置为“.container”的百分比

.icon_pos {
    position: absolute;
    top: 5%;
    left: 5%;
}

更新1

这将根据“.container”更改容器“icon_pos”的宽度和高度

.icon_pos 
{
      position: absolute;
      top: 5%;
      left: 5%;
      width: 20%;
      height: 20%;
 }

您还应该将图标大小设置为“icon_pos”的 100%

.icon 
{
     width: 100%;
     height: 100%;
}