Javascript 使用视口宽度（vw）在ReactJs中进行预览，以便以小比例放置元素

我正在ReactJs中构建一个组件，在页面中的图像上显示一些文本。此文本在使用ReactJs创建的configuration manager应用程序中配置

我使用vw（视口宽度）作为单位，因为这个组件需要响应。使用这些单位，尺寸文本总是合适的。如果我调整窗口的大小，文本就在同一个地方

我的问题是在配置管理器中配置将要显示的文本，因为我正在模态窗口中预览此组件

我需要正确准确地定位文本显示的位置，就像它是原始渲染一样。它需要像一个真正的组成部分。 我也在使用大众汽车，但它不起作用。它出现在容器的另一个站点中，当我调整窗口大小时，文本也会移动。 我尝试使用vmin单位，但它们也不起作用

我需要容器将引用作为浏览器窗口，以便视口宽度单位使用与预览相同的测量值

或者如果你有任何其他的想法来做这件事

这是ReactJS中代码的简化部分。此外，州政府还负责测试数据，以了解问题

import React, { Component } from 'react';
import '../styles/main.scss';


class PreviewEditor extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text: {
                text: '',
                fontSize: 2,
                position: {
                    vertical: {
                        key: 'top',
                        value: 20
                    },
                    horizontal: {
                        key: 'right',
                        value: 10
                    }
                }
            }
        }
    }

    render() {
        let object = this.props;
        return (
            <div>
                <div className='container-body'>
                    <div>
                        <div className="container-preview">
                            <img src={object.url}></img>
                            <div className="conteiner-text" style={{
                                [this.state.text.position.vertical.key]: this.state.text.position.vertical.value + "vw",
                                [this.state.text.position.horizontal.key]: this.state.text.position.horizontal.value + "vw",
                                fontSize: this.state.text.fontSize + "vw",
                            }}>
                                <label>{this.state.text.text}</label>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        ............ TODO
                    </div>
                </div>
            </div>
        );
    }
}
export default PreviewEditor

---

vw

代表

视口宽度

，它旨在始终设置相对于当前视口的大小，而不管容器是什么。如果您只想要相对于容器宽度的大小，那么应该选择用户百分比大小。 因此，在您的例子中，可以不同地设置每个容器的宽度（例如，使用vw表示实际容器，使用像素表示预览），并以百分比表示其所有内容大小，以便在不同的比例下始终具有相同的比率

.container-preview {
  background-color: #2dc5c5;
    width: 100%;
    position: relative;
}
.container-preview > img{
  max-width: 100%;
}
.conteiner-text{
    display: inline-block;
    position: absolute;
}