Question

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

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

Answer 1

如果你只想要背景img来填充宽度而不考虑你可以做的高度：

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

但有了这个，img并没有填充element-with-back-img的高度，因为高度将设置为＆＃34; auto＆＃34;

通过这样做：

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

img填充高度，但如果背面img的元素与img的比例不同，则会改变其比例以填充元素-with-back-img

我建议你：

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

这将背景图像缩放到尽可能大，以使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域中的视野中

我希望这可以帮助你

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用身体的css：

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

Answer 3

要按宽度方式填充，请使用＆＃39; background-size＆＃39;。这允许您按顺序输入两个参数 - 宽度和高度。使用＆＃39; 100％＆＃39;填充宽度，然后是高度的固定值（假设您知道图像的高度是多少）。

E.g。如果你的背景图片是500px高，那么：

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

您可以自己试验here。

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

3 个答案: