反应-儿童对父母比例的看法

Question

我遇到了一种情况，其中我有一个父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>

在上面的代码中，子元素有、左和顶部，由鼠标动态定义，点击地图图像上的位置。我有四个预定义的缩放水平从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 - in/o2qLt4q8/33/

Answer 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);
 }

这里的问题是，当您缩放地图图像时，图像正在缩放，但是类缩放-2宽度不是缩放，这是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;
 }

所以，要么缩放缩放-2div类，要么向地图图像添加缩放-2类，并定义地图图像相对.