how to attach picture to another picture?-CodePudding

I want to do synchronising device, it measures phase shift between phases. It's a measurement device, that have a pointer like a clock.

It consists of two images, a frame and arrow, that rotates. but when i try to resize window i have the following:

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

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

How can i bound that images so that when i resize the window or change my device it proportionaly resizes.

CodePudding user response：

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

CodePudding user response：

You can use a container width position:relative and set the second image with position:absolute. I'm not sure this is the best way to do it but here is an example :

.container{
  background-color:blue;
  width: 300px;
  height: 300px;
  position: relative;
}
.clock{
  width:100%;
}
.pointer{
  position:absolute;
  top: calc(50% - (68px/2));
  left: 50%;
  width: 120px;
  transform: rotate(-180deg);
  transition-duration: 1s;
  transform-origin: left;
}
.container:hover .pointer{
  transform: rotate(-45deg);
}

<div >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Circle_-_black_simple.svg/500px-Circle_-_black_simple.svg.png" alt="" >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/U+2192.svg/250px-U+2192.svg.png" alt="" >
</div>