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

Question

我现在的问题是，当我更改窗口大小时，底部有一个滚动条，图片(即容器)将适合屏幕，但是当我向右滚动时，会有很多额外的空白区域。所以当我改变屏幕大小时，容器上的文字会移动。我改为使用 media only screen 在屏幕大小改变时更改字体大小，但这不仅仅是关于字体大小，文本会移动

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

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

Answer 1

position: absolute;

在上面的容器有之前不会工作

position: relative;

首先将相对位置放置到您的容器中。