我有

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

理想的效果是,这个背景图像的宽度将与页面的宽度相等,高度改变以保持比例。例如,如果原始图像刚好是100*200(任何单位),主体宽度为600px,背景图像最终应该是1200px高。如果窗口调整大小,高度应该自动改变。这可能吗?

目前,Firefox看起来像是先调整高度,然后再调整宽度。这可能是因为高度是最长的维度,它试图避免裁剪?我想垂直裁剪,然后滚动:没有水平重复。

此外,Chrome将图像放置在中心,没有重复,即使是明确给出background-repeat:repeat,这是默认的。


当前回答

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

糟糕的代码:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

好的代码:

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;

其他回答

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

背景图像没有设置完美,那么他的css是有问题的,所以他的css文件更改为下面的代码

html { 背景图片:url(“example.png”); 平铺方式:不再重演; 背景位置:0% 0%; Background-size: 100% 100%; }

%;Background-size: 100% 100%;"

设置背景大小没有帮助,下面的解决方案对我有用:

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

它基本上是裁剪图像并使其适合,背景-大小:包含/覆盖仍然没有使它适合。

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

糟糕的代码:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

好的代码:

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;

以下是对我有效的方法:

background-size: auto 100%;