获取背景图像或文本以填充宽度，不重复，但不垂直拉伸

Question

正如标题所说。 如何获得背景图像，甚至是文本来沿宽度方向填充宽度，而不是垂直拉伸/挤压，仅显示一次？ 我似乎无法弄清楚。 谢谢。

编辑：我也希望高度与图片的宽度成比例地缩放，因此它不会偏斜，而是与宽度成比例。

Answer 1

如果仅希望背景img填充宽度而不考虑高度，则可以执行以下操作：

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: 100%;
}

但与此同时，img不会填充element-with-back-img的高度，因为该高度将设置为“自动”

通过做这个：

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

img填充高度，但如果element-with-back-img与img的比例不同，则此比例将更改其比例以填充element-with-back-img

我建议您：

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: cover;
}

这样会将背景图像缩放到尽可能大的程度，以使背景区域完全被背景图像覆盖。 在背景定位区域内可能看不到背景图像的某些部分

我希望这可以帮助你

 .test { background-image: url(http://placekitten.com/1000/750); background-size: 100%; background-repeat: no-repeat; background-color: lightblue; height: 150px; display: inline-block; } #test1 { width: 200px; } #test2 { width: 100px; } #test3 { width: 300px; } .test:hover { background-position: center center; } 

 <div class="test" id="test1"></div> <div class="test" id="test2"></div> <div class="test" id="test3"></div> 

Answer 2

使用CSS作为主体：

body {background-repeat: no-repeat;
      background-size: 100%;}

Answer 3

要沿宽度方向填充，请使用“背景尺寸”。 这样您就可以按此顺序输入两个参数-宽度和高度。 使用“ 100％”填充宽度，然后使用固定的高度值（假设您知道图像的高度是多少）。

例如，如果您的背景图片高为500px，则：

{
    background-size:100% 500px;
    background-repeat: no-repeat;
}

您可以在这里为自己做实验。