更新1

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％（在“父亲图像”类中添加“最大宽度：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%;
}

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

1 个答案:

更新1