如何调整背景图片的大小以容纳其中的所有文本

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%;设置为覆盖整个背景但可能会拉伸的图像。

（details）

Answer 2

我阅读了您对其他答案的评论，并且我认为您误解了图像宽高比在这里发生的情况。

但是，如果您确实希望每次都完全拉伸并扭曲图像以使其填满整个屏幕，而不要重复。.然后在CSS中为背景图像使用background-size: 100%;。

Answer 3

看着答案，我认为您正在寻找的是将background-size: contain;更改为background-size: 100% 100%;，从而拉伸图像以始终满足内容要求。

让我知道这是否是您想要的。

您可以在https://jsfiddle.net/alemohamad/fu8szLmc/3/上测试我的想法。