html - 如何使背景图像调整大小以容纳其中的所有文本

Question

如何使所有文本在所有屏幕尺寸上都位于背景图像内，我已经编写了这段代码，但文本仍然位于图像之外。大屏幕右侧也有一个空白区域，如何删除它。

屏幕截图:

右侧屏幕截图中的额外空白

文本在小屏幕上超出背景

HTML:

 <div class="h-100">
    <div class="h-100" id="background">
      <div class="container">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo suscipit quis sed temporibus eius magni, adipisci, ad, maxime saepe mollitia id sunt perspiciatis asperiores earum voluptate fugiat pariatur. Officia repudiandae iusto maxime ad quibusdam! Esse adipisci eos tenetur rerum amet, doloremque quidem commodi architecto quis, quaerat culpa, distinctio praesentium sunt.</p>
      </div>
    </div>
  </div>

CSS:

#background {
  background-image: url("../imgs/15409-[Converted].jpg");
  background-size: contain;
  background-repeat: no-repeat;
}

Answer 1

听起来您可能需要 background-size: cover;。这将按比例缩放图像，以便完全覆盖背景，可能会对其进行裁剪。

如果您想防止裁剪，您可以设置 background-size: 100%; 以覆盖整个背景但可能会被拉伸(stretch)的图像。

( details )