CSS背景图像要适合宽度，高度应自动按比例缩放

我有

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

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

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

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

1015926 次浏览
小开

我不知道你到底在找什么，但你真的应该看看Chris coyer从CSS-Tricks写的这些优秀博客文章:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

阅读每篇文章的描述，看看它们是否是你要找的。

第一个回答了以下问题:

有办法使背景图像调整大小吗?也就是说，不管浏览器窗口的大小如何，都要用一张图像填充网页的背景。另外，让它随着浏览器窗口的变化而调整大小。另外，要确保它保持比例(不要拉伸得很奇怪)。此外，不会导致滚动条，只是垂直切断如果它需要。此外，在页面中作为内联标记出现。

第二篇文章的目标是获得以下内容，即“在任何时候都能覆盖整个浏览器窗口的网站背景图像”。

希望这能有所帮助。

小开
最佳答案

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

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

contain和cover的鸡蛋平铺

抱歉这个糟糕的双关语，但我将使用Biswarup Ganguly拍摄的当天照片进行演示。假设这是你的屏幕，灰色区域在可见屏幕之外。为了演示，我将假设一个16x9的比率。

screen

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

contain

contain

缩放图像，同时保留其固有长宽比(如果有的话)，以最大的尺寸，以便其宽度和高度都能适应背景定位区域。

这确保了背景图像总是完全包含在背景定位区域中，然而，在这种情况下，可能会有一些空白空间被你的background-color填充:

contains

cover

cover

缩放图像，同时保留其固有的纵横比(如果有的话)，以最小的尺寸，以便其宽度和高度都能完全覆盖背景定位区域。

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

cover

使用实际代码演示

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);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<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 <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

小开

根据https://developer.mozilla.org/en-US/docs/CSS/background-size的提示，我最终得出了以下对我有用的食谱

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;
}
小开

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

坏代码:< br > < br >

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

< br >

好的代码:< br > < br >

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:包含;

小开

试试这个,

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

只要加上这一行:

    .your-class {
height: 100vh;
}

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

查看更多信息:使div为浏览器窗口高度的100%

小开

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

html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}

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

小开

以下是对我有效的方法:

background-size: auto 100%;
小开

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

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

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

小开 
body{
background-image: url(../url/imageName.jpg);
background-attachment: fixed;
background-size: auto 100%;
background-position: center;
}
小开 
  width: 100%;
height: 100vh;
background: url("../img/hero-bg.jpg") top center;
background-size: cover;
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
小开

如果你设置了min-height，例如:

min-height: 100vh;

您可以使用下面的代码来轻松地适应您的背景

body {
background: url(images/background.svg);
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
}

提交答案