相对于容器中父图像的缩放，缩放/移动容器中具有绝对位置的子图像

Question

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

我现在想将父图像缩放到最大宽度：100％

现在我希望放置在绝对位置的图标根据父图像表现相对，这样它们总是在父图像上的相同位置。

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

CSS：

<style>
.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;
}
</style>

HTML：

<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％（将'max-width：100％'添加到类'father-image'）。如果我这样做，图像在屏幕上完全可见，但图标保持在50/50，这不是所需的行为，因为它也应该相对于父图像移动/缩放。

有没有人有想法？

Answer 1

如果我找对你，你只需要将“.icon_pos”位置设置为“.container”的％。

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

update 1

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

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

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

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