Html CSS如何自动缩放文本以适应容器

我现在的问题是，当我改变窗口大小时，底部有一个滚动条，图片（即容器）将适合屏幕，但当我向右滚动时，会有很多额外的空白。因此，当我更改屏幕大小时，容器上的文本将移动。我改为使用“仅媒体屏幕”，以便在屏幕大小更改时更改字体大小，但这不仅仅与字体大小有关，文本将移动

.container {
    background-image: url(../images);
    background-repeat:repeat;
    -webkit-background-size: cover;
    /*compatible for webkit*/
    -moz-background-size: cover;
    /*compatible for firefox mozilla*/
    -o-background-size: cover;
    /*compatible for opera*/
    background-size: cover;
    /*compatible for generic browsers*/
    margin-top:-5px;
    //max-width:400%;
    margin-left:auto;
    margin-right:auto;
    width:100%;
}
.text {
    position: absolute;
    width: 39%;
    height: 20%;
    left: 420px;
    top: 4020px;
    text-align:left;
    font-size:34px;
    font-weight:530;
}

我还尝试使用相对位置而不是绝对位置。当我这样做时，容器图像会突然变得巨大。它甚至不适合屏幕，它只是变得巨大

position: absolute;

只有在上面的容器安装完成后才能工作

position: relative;

---

先把容器的相对位置放在第一位。

我做了。我添加了相对于容器的位置，我还应该做什么