CSS背景图片适合宽度，高度应按比例自动缩放 [英] CSS background image to fit width, height should auto-scale in proportion

问题描述

我有

  body {
 background：url（images / background.svg）; 
} 
  

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

现在，Firefox看起来像是使高度适合，然后调整宽度。这可能是因为高度是最长的尺寸，它试图避免裁剪？我要垂直裁剪，然后滚动：无水平重复。

此外，Chrome将图像放在中心，当显式地给出 background-repeat：repeat 时，这是默认的。

解决方案

这里有一个CSS3属性，即 background-size （兼容性检查）。虽然可以设置长度值，但通常使用特殊值包含和 cover 。在你的具体情况下，你应该使用 cover ：

  body {
 background-image：url（images / background.svg）; 
 background-size：cover; / *< ------ * / 
 background-repeat：no-repeat; 
 background-position：center center; / *可选，中心图像* / 
} 
  

包含和封面

对不起对不起，使用Biswarup Ganguly的一天的图片进行演示。假设这是你的屏幕，灰色区域在你的可见屏幕之外。为了演示，我将假设一个16x9的比例。

我们想使用上述的一天的图片作为背景。不过，由于某种原因，我们将图像裁剪为4x3。我们可以将 background-size 属性设置为某个固定长度，但我们将关注 contains 和 cover 。注意，我还假设我们没有修改 body 的宽度和/或高度。

包含

 包含
  

缩放图像，同时保留其内在长宽比（如果有），最大尺寸，使其宽度和高度




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

cover

  cover 
  

缩放图像，同时保留其固有宽高比（如果有），以最小的尺寸，使其宽度和高度可以完全覆盖背景定位区域。

这样可确保背景图片覆盖所有内容。将不会有可见的 background-color ，但是根据屏幕的比例，您的图片的很大一部分可能被截断：

演示与实际代码

  div& div {background-image：url（http://i.stack.imgur.com/r5CAq.jpg）;背景重复：无重复; background-position：中心; background-color：#ccc; border：1px solid; width：20em; height：10em;} div.contain {background-size：contains;} div.cover {background-size：cover;} / ********************** **********************说明框的其他样式********************** *********************** / div> div {margin：0 1ex 1ex 0; float：left;} div + div {clear：both; border-top：1px blank silver; padding-top：1ex;} div> div :: after {background-color：＃000; color：#fefefe; margin：1ex; padding：1ex;不透明度：0.8;显示：block; width：10ex; font-size：0.7em; content：attr（class）;}  

 < div> < div class =contains>< / div> < p>请注意灰色背景。该图片不覆盖整个区域，但完全< em>包含< / em>。 < / p>< / div>< div> < div class =cover>< / div> < p>请注意图像底部的鸭子/鹅。大部分的水被切割，以及一部分的天空。你不再看到完整的图像，但你也没有看到任何背景颜色;图像< em>覆盖< / em>所有的< code>& lt; div& gt;< / code>。< / p>< / div>  

/ div>

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. e.g. 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. 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. 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.

解决方案

There is a CSS3 property for this, namely background-size (compatibility check). While one can set length values, it's usually used with the special values contain and cover. In your specific case, you should use 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

Sorry for the bad pun, but I'm going to use the picture of the day by Biswarup Ganguly for demonstration. 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.

We want to use the aforementioned picture of the day as a background. However, we cropped the image to 4x3 for some reason. We could set the background-size property to some fixed length, but we will focus on contain and cover. Note that I also assume that we didn't mangle the width and/or height of 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:

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:

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>

这篇关于CSS背景图片适合宽度，高度应按比例自动缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！