反应 - 相对于父母规模的孩子位置答案

【问题标题】：REACT - Child position with respect of scale of parent反应 - 相对于父母规模的孩子位置
【发布时间】：2017-07-26 02:11:27
【问题描述】：

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

<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>

在上面的代码中，子元素的left和top由鼠标在地图图像上的点击位置动态定义。我有四个来自 css 的预定义缩放级别，我在放大/缩小按钮上动态提供。

下面是我的css

.image-viewer .image-wrapper {
  position: relative;
  width: 92vw;
  height: 92vh;
  margin: 4vh 4vw;
  overflow: hidden;
}
.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;
}

.image-viewer .image-outer .map-image {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  width: auto !important;
  height: auto !important;
  background-size: contain!important;
  background-position: center!important;
  background-repeat: no-repeat !important;
  transform: scale3d(1, 1, 1);
  -webkit-transform: scale3d(1, 1, 1);
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  animation: image-fade-in 0.4s ease;
  -webkit-animation: image-fade-in 0.4s ease;
}
.image-viewer .image-outer.zoom-1 {
  cursor: default;
}
.image-viewer .image-outer.zoom-2 .map-image {
  transform: scale3d(1.5, 1.5, 1);
  -webkit-transform: scale3d(1.5, 1.5, 1);
}
.image-viewer .image-outer.zoom-3 .map-image {
  transform: scale3d(2, 2, 1);
  -webkit-transform: scale3d(2, 2, 1);
}
.image-viewer .image-outer.zoom-4 .map-image {
  transform: scale3d(2.5, 2.5, 1);
  -webkit-transform: scale3d(2.5, 2.5, 1);
}
.image-viewer .image-outer.zoom-5 .map-image {
  transform: scale3d(3, 3, 1);
  -webkit-transform: scale3d(3, 3, 1);
}

.booth{
  width:9px;
  height:9px;
  border-color:white;
  border-width:1px;
  border-style:solid;
  position:absolute;
  z-index:999;
  background-color: red;
  transition: all .2s ease-in-out;
}

.booth:hover{
  cursor: pointer;
  transform: scale(2.0);
}

这是我的 jsFiddle - https://jsfiddle.net/veda_in/o2qLt4q8/33/

【问题讨论】：

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

标签： javascript css reactjs

【解决方案1】：

只要改变这个。

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

到：

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

这里的问题是，当您缩放地图图像时，图像正在缩放，但 zoom-2 类宽度未缩放，它是展位元素和地图图像的容器。

.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 类添加到 map-image 并定义 map-image relative。

【讨论】：