如何将一张图片附加到另一张图片上？

Question

我希望做一个同步装置，它可以测量相位差。它是一种测量设备，有一个像钟表一样的指针。 它由两个图像组成，一个框架和一个箭头，它们会旋转。但是当我尝试调整窗口大小时，出现了以下情况： 我的HTML：

<div>

    <div>
      <div className={classes.sync_point}> . </div>
      <img src={arpng} ref={point} alt="arrow" className={classes.arrow} />
      <img src={syncFrame} alt="syncframe" className={classes.syncFrame} />
    </div>

    <div className={classes.btn}> 
     <Button variant='contained' onClick={calculateResult}>SYNCHRONISE</Button>
    </div>

    <div>
      <h1>{word}</h1>
    </div> 

</div>

我的CSS：

.syncFrame{
    margin-top: 40px;
    width: 50%;
    height: 50%;
    position: absolute;
    left: 20vh;
    z-index: 1;
}

.arrow{
    margin-top: 40px;
    width: 50%;
    height: 50%;
    position: relative;
    z-index: 2;
}

如何绑定图片，使其在调整窗口大小或更改设备时按比例缩放。

- Vladimir Kosilov

---

你可以尝试设置图片容器的“width”属性。 - Cédric

@Cédric 但是这样我就无法调整我的图片大小。 - Vladimir Kosilov

我猜这不是你想要的，但你可以使用媒体查询添加多个宽度大小。我只是发布了一个使用容器宽度的示例。 - Cédric

我编辑了我的回答，我认为这就是你想要的吗？ - Cédric

@Cédric 是的，太棒了，谢谢！ - Vladimir Kosilov

Answer 1

<div className="parent">
    <div className={classes.sync_point}>
        .
    </div>
    <img src={arpng} ref={point} alt="arrow" className={classes.arrow} />
    <img src={syncFrame} alt="syncframe" className={classes.syncFrame} />
</div>


.parent{ 
   height: ....;
   width: ....;
   border: 1px solid black;
   position: relative;
}
img, .sync_point {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   max-height: 100%;
}

- codmitu

Answer 2

您可以使用容器宽度position:relative，并使用position:absolute设置第二个图像。您可以使用top:0，left:50%，bottom:0和margin:auto根据需要设置指针。

.container{
  background-color:blue;
  width: 50%;
  position: relative;
}
.clock{
  width:100%;
}
.pointer{
  position:absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  margin: auto; 
  width: 40%;
  transform: rotate(-180deg);
  transition-duration: 1s;
  transform-origin: left;
}
.container:hover .pointer{
  transform: rotate(-45deg);
}

<div class="container">
    <img class="clock" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="">
    <img class="pointer" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U%2B2192.svg/250px-U%2B2192.svg.png" alt="">
</div>

- Cédric