html - CSS背景图像适合宽度，高度应按比例自动缩放(CSS background image to fit width, height should auto-scale in proportion)

Question

I have

(我有)

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

The desired effect is that this background image will have width equal to that of the page, height changing to maintain the proportion.

(期望的效果是该背景图像的宽度等于页面的宽度，高度变化以保持比例。)

eg if the original image happens to be 100*200 (any units) and the body is 600px wide, the background image should end up being 1200px high.

(例如，如果原始图像恰好是100 * 200（任何单位）且正文宽度为600px，则背景图像最终应为1200px高。)

The height should change automatically if the window is resized.

(如果调整窗口大小，高度应自动更改。)

Is this possible?

(这可能吗？)

At the moment, Firefox looks like it's making the height fit and then adjusting the width.

(目前，Firefox看起来正在调整高度，然后调整宽度。)

Is this perhaps because the height is the longest dimension and it's trying to avoid cropping?

(这可能是因为高度是最长的尺寸而且它试图避免裁剪？)

I want to crop vertically, then scroll: no horizontal repeat.

(我想垂直裁剪，然后滚动：没有水平重复。)

Also, Chrome is placing the image in the centre, no repeat, even when background-repeat:repeat is given explicitly, which is the default anyway.

(此外，Chrome将图像置于中心，不重复，即使明确给出background-repeat:repeat ，这仍然是默认值。)

  ask by spraff translate from so

Answer 1

There is a CSS3 property for this, namely background-size ( compatibility check ).

(这有一个CSS3属性，即background-size （ 兼容性检查 ）。)

While one can set length values, it's usually used with the special values contain and cover .

(虽然可以设置长度值，但它通常与特殊值contain和cover 。)

In your specific case, you should use cover :

(在您的具体情况下，您应该使用cover ：)

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

Eggsplanation for contain and cover (Eggsplanation contain和cover)

Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration.

(对不起的双关语感到抱歉，但我将使用Biswarup Ganguly当天的照片进行演示。)

Lets say that this is your screen, and the gray area is outside of your visible screen.

(让我们说这是你的屏幕，灰色区域在你的可见屏幕之外。)

For demonstration, I'm going to assume a 16x9 ratio.

(为了演示，我将假设一个16x9的比例。)

We want to use the aforementioned picture of the day as a background.

(我们想用上面提到的图片作为背景。)

However, we cropped the image to 4x3 for some reason.

(但是，出于某种原因，我们将图像裁剪为4x3。)

We could set the background-size property to some fixed length, but we will focus on contain and cover .

(我们可以将background-size属性设置为某个固定长度，但我们将重点关注contain和cover 。)

Note that I also assume that we didn't mangle the width and/or height of body .

(请注意，我还假设我们没有破坏body的宽度和/或高度。)

contain

 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.

(缩放图像，同时保持其固有的纵横比（如果有的话）到最大尺寸，使得其宽度和高度都可以适合背景定位区域。)

This makes sure that the background image is always completely contained in the background positioning area, however, there could be some empty space filled with your background-color in this case:

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

cover

 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.

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

This makes sure that the background image is covering everything.

(这可以确保背景图像覆盖所有内容。)

There will be no visible background-color , however depending on the screen's ratio a great part of your image could be cut off:

(没有可见的background-color ，但是根据屏幕的比例，图像的很大一部分可能会被切断：)

Demonstration with actual code (用实际代码演示)

 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>