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

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

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

如何绑定这些图像,以便在调整窗口大小或更改设备时,它会按比例调整大小.

推荐答案

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

Html相关问答推荐

D3.js—分组条形图—更新输入数据时出错

为什么我的搜索栏会出现在WONG位置?

如何使用html和css关键帧创建动画

使用HTML进行DAX测量

防止position:relative的child在出界时收缩

更改Angular 为17的material Select 字段的高度?

Css网格:两列,除非小于150px

旧文本淡出,但新文本不会淡入,而是突然出现

元素在向x提供溢出时被隐藏

错误时交换表单,成功时使用HTMX重定向

是否有语义 HTML 可以澄清含义?

如何使用CSS Select 表亲元素

如何使用 CSS 应用带有笔划的文本阴影?

不完整的悬停

为什么使用 Css 只能看到 1 列而不是 3 列?

子 div 在父 div 中溢出

为什么 text-align 应用于 span 而不是 CSS 中的 img

两部分问题 - 是什么导致了这个空白?

我如何使用 HTML 和 CSS 在我的下拉菜单中获得这种类型的样式

HTML 标记未在页面上展开