how to attach picture to another picture? - html

Question

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.

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

Answer 2

You can use a container width position:relative and set the second image with position:absolute. You can set the pointer as you need with top:0, left:50%, bottom:0 and 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>