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:
我的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;
}
如何绑定这些图像,以便在调整窗口大小或更改设备时,它会按比例调整大小.