Question

我有一个情况，我有一个父 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>

在上面的代码中，子元素的左和顶部由地图图像上的鼠标点击位置动态定义。我有四个来自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/

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

所以要么缩放zoom-2 div类，要么将zoom-2类添加到map-image并定义map-image relative。

REACT - 关于父母规模的子女职位

1 个答案: