Question

我需要显示一个图像（平面图），在其顶部放置多个图标（相机），然后将该图像（其div容器）缩放到其父级。

如果只是图像，简单的max-width: 100%就可以了。但是我需要在其上面保持正确的相机位置。

以下示例显示了我的当前状态。现在，我需要以某种方式缩放.container以适合顶级div（在这里，我设置了400px的宽度，但在现实生活中将是动态/响应的），同时将相机图标保持在正确的位置。

.container {
  position: relative;
}

.camera {
  position: absolute;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  background: darkred;
}

<div style="width: 400px">
  <div class="container">
    <img src="https://via.placeholder.com/600x400">
    <div class="camera" style="left: 50px; top: 50px"></div>
    <div class="camera" style="left: 300px; top: 50px"></div>
    <div class="camera" style="left: 550px; top: 350px"></div>
  </div>
</div>

是否可以通过CSS实现？我知道我可以将带有摄像机图标的平面图制作为SVG，并通过max-width仅缩放图像，但是，如果可能的话，我宁愿不构造SVG。

一些注意事项：

我知道图片的确切大小
每个图像的大小都会不同
我不知道父级div的大小（可以更改）

我正在寻找一种CSS方式，我知道如何通过JS手动执行此操作，手动计算比例因子并使用transform: scale(...)。

Answer 1

您可以通过使用％-age而不是px定位相机来做到这一点（也可以使其尺寸成比例）。然后，您可以更改容器的大小，它们将保持相对于容器的位置。

.container {
  position: relative;
}
#outer{
   border: 1px solid black;
}
.camera {
  position: absolute;
  width: 5%;
  height: 5%;
  align-items: center;
  justify-content: center;
  background: darkred;
}
img{
  width:100%;
}

<div style="width: 500px" id="outer">
  <div class="container">
    <img src="https://via.placeholder.com/600x400">
    <div class="camera" style="left: 5%; top: 5%"></div>
    <div class="camera" style="left: 30%; top: 20%"></div>
    <div class="camera" style="left: 50%; top: 50%"></div>
  </div>
</div>

 <div style="width: 200px" id="outer">
  <div class="container">
    <img src="https://via.placeholder.com/600x400">
    <div class="camera" style="left: 5%; top: 5%"></div>
    <div class="camera" style="left: 30%; top: 20%"></div>
    <div class="camera" style="left: 50%; top: 50%"></div>
  </div>
</div>

将div缩放到其父级，同时保持绝对位置在内部

1 个答案: