Javascript 反应-相对于父级比例的子级位置

我有一种情况，我有一个父div，其中可以有任意数量的子div，现在我在父div上应用scale，因此由于scale应用于父div，因此看起来子元素正在从其位置移动，我希望子div跟随父div scale如何管理这种情况，下面是我的部分代码

<div className="image-viewer">
   <div className="image-wrapper">
      <div class="zoom-2 image-outer">
        <img class="map-image" src="map.png"/>
        <div class="booth" style="left: 617px; top: 178px;">&nbsp;</div>
        <div class="booth" style="left: 735px; top: 160px;">&nbsp;</div>
      </div>
   </div>
</div>

这是我的JSFIDLE-

请更改此设置

.image-viewer .image-outer.zoom-2 .map-image {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
}

致：

这里的问题是，当您缩放地图图像时，图像是缩放的，但class zoom-2 width不是缩放的，它是booth元素和地图图像的容器

.image-viewer .image-outer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
 }

---

因此，要么缩放zoom-2 div类，要么将zoom-2类添加到地图图像中，并定义地图图像相对值。

从给定示例中不清楚发生了什么->。请创建一个小提琴，显示您遇到的问题。@Morpheus我添加了JSFIDLE

.image-viewer .image-outer.zoom-2 {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
 }

.image-viewer .image-outer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  transition: all .35s ease;
  -webkit-transition: all .35s ease;
 }