关于html：CSS背景图像适合宽度，高度应按比例自动缩放


CSS background image to fit width, height should auto-scale in proportion

我有

1
2
3
body {
    background: url(images/background.svg);
}

期望的效果是该背景图像的宽度等于页面的宽度，高度变化以保持比例。 例如 如果原始图像恰好是100 * 200(任何单位)且正文宽度为600px，则背景图像最终应为1200px高。 如果调整窗口大小，高度应自动更改。 这可能吗？

目前，Firefox看起来正在调整高度，然后调整宽度。 这可能是因为高度是最长的尺寸而且它试图避免裁剪？ 我想垂直裁剪，然后滚动：没有水平重复。

此外，即使明确指定background-repeat:repeat，Chrome也会将图像置于中心位置，不会重复，无论如何都是默认值。

相关讨论

这有一个CSS3属性，即background-size(兼容性检查)。虽然可以设置长度值，但它通常与特殊值contain和cover一起使用。在您的特定情况下，您应该使用cover：

1
2
3
4
5
6
body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

eggplanation为contain和cover

对不起的双关语感到抱歉，但我将使用Biswarup Ganguly当天的照片进行演示。让我们说这是你的屏幕，灰色区域在你的可见屏幕之外。为了演示，我将假设一个16x9的比例。

screen

我们想用上面提到的图片作为背景。但是，出于某种原因，我们将图像裁剪为4x3。我们可以将background-size属性设置为某个固定长度，但我们将关注contain和cover。请注意，我还假设我们没有破坏body的宽度和/或高度。

contain

1
contain

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

这样可以确保背景图像始终完全包含在背景定位区域中，但是，在这种情况下，可能会有一些空白空间填充background-color：

contain

cover

1
cover

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

这可以确保背景图像覆盖所有内容。没有可见的background-color，但是根据屏幕的比例，图像的很大一部分可能会被切断：

cover

用实际代码演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
1
2
3
4
5
6
7
8
9
10
  <p>
Note the grey background. The image does not cover the whole region, but it's fully contained.
 
</p>


 
  <p>
Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <wyn></wyn>.
</p>

相关讨论

基于来自https://developer.mozilla.org/en-US/docs/CSS/background-size的提示，我最终得到了以下对我有用的配方

1
2
3
4
5
6
7
8
9
10
body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
相关讨论

我不确定你到底在寻找什么，但是你真的应该看看Chris Coyier写的CSS-Tricks的这些优秀博客文章：

How To: Resizeable Background Image

Perfect Full Page Background Image

阅读每篇文章的描述，看看它们是否符合您的要求。

第一个回答了以下问题：

Is there a way to make a background image resizeable? As in, fill the background of a web page edge-to-edge with an image, no matter the size of the browser window. Also, have it resize larger or smaller as the browser window changes. Also, make sure it retains its ratio (doesn't stretch weird). Also, doesn't cause scrollbars, just cuts off vertically if it needs to. Also, comes in on the page as an inline tag.

第二篇文章的目标是获得以下内容，"网站上的背景图像始终覆盖整个浏览器窗口。"

希望这可以帮助。

试试这个，

1
2
3
element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

背景图像不是设置完美然后他的CSS是问题创建所以他的CSS文件更改为下面的代码

1
2
3
4
5
6
html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

％; background-size：100％100％;"

只需添加以下一行：

1
2
3
    .your-class {
        height: 100vh;
    }

vh是视口高度。
这将自动缩放以适合设备的浏览器窗口。

在这里查看更多：使div为浏览器窗口的100％高度

1
2
3
4
5
6
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
相关讨论

我遇到了同样的问题，在调整浏览器尺寸时无法调整图像大小。

坏代码：

1
2
3
4
5
6
7
html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

好代码：

1
2
3
4
5
6
7
8
html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

这里的关键是添加这个元素 - > background-size：contains;

这对我有用：

1
background-size: auto 100%;

设置背景大小没有帮助，以下解决方案对我有用：

1
2
3
4
5
.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

它基本上会裁剪图像并使其适合，background-size: contain/cover仍然不适合。