Question

我现在的问题是当我改变窗口大小时底部有一个滚动条，图片（它是容器）将适合屏幕，但是当我向右滚动时会有很多额外的空白区域。所以当我改变屏幕尺寸时，容器上的文字会移动。当屏幕大小改变时，我改为使用仅媒体屏幕来改变字体大小，但这不仅仅是字体大小，文本会移动

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

首先将相对位置放在容器上。

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

1 个答案: