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

Question

提问by spraff

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?

想要的效果是这个背景图片的宽度等于页面的宽度，高度改变以保持比例。例如，如果原始图像恰好是 100*200（任何单位）并且主体是 600px 宽，则背景图像最终应该是 1200px 高。如果调整窗口大小，高度应自动更改。这可能吗？

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 wantto crop vertically, then scroll: no horizontal repeat.

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

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

此外，Chrome 将图像放置在中心，不会重复，即使background-repeat:repeat是明确给出的，无论如何这是默认设置。

Answer 1

回答by Zeta

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 containand cover. In your specific case, you should use cover:

为此有一个 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 */
}

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 Gangulyfor 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.

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

screen

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-sizeproperty to some fixed length, but we will focus on containand cover. Note that I also assume that we didn't mangle the width and/or height of body.

我们想使用上述当天的图片作为背景。但是，出于某种原因，我们将图像裁剪为 4x3。我们可以将background-size属性设置为某个固定长度，但我们将重点放在contain和上cover。请注意，我还假设我们没有破坏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.

contain
将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都适合背景定位区域。

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-colorin this case:

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

contain

`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.

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

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:

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

cover

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>

Answer 2

回答by Yauhen Yakimovich

Based on tips from https://developer.mozilla.org/en-US/docs/CSS/background-sizeI end up with the following recipe that worked for me

根据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;
}

Answer 3

回答by element119

I'm not sure what you're looking for exactly, but you really should check out these excellent blog posts written by Chris Coyier from CSS-Tricks:

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

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

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

Read the descriptions for each of the articles and see if they're what you're looking for.

阅读每篇文章的说明，看看它们是否是您要查找的内容。

The first answers the following question:

第一个回答以下问题：

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.

有没有办法使背景图像可调整大小？就像这样，无论浏览器窗口的大小如何，都用图像从边到边填充网页的背景。此外，随着浏览器窗口的变化，将其调整为更大或更小。另外，请确保它保持其比例（不会拉伸怪异）。此外，不会导致滚动条，只是在需要时垂直切断。此外，作为内联标签出现在页面上。

The second post's goal is to get the following, a "background image on a website that covers the entire browser window at all times. "

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

Hope this helps.

希望这可以帮助。

Answer 4

回答by jignesh vasoya

Background image is not Set Perfect then his css is problem create so his css file change to below code

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

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

%; background-size: 100% 100%;"

%; 背景尺寸：100% 100%；"

Answer 5

回答by Laxman Maurya

Try this,

尝试这个，

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

Answer 6

回答by Ruto Collins

Just add this one line:

只需添加这一行：

    .your-class {
        height: 100vh;
    }

vh is viewport height. This will automatically scale to fit the device' browser window.

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

Check more here: Make div 100% height of browser window

在此处查看更多信息：使 div 为浏览器窗口的 100% 高度

Answer 7

回答by Adriaan Mouton

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

Answer 8

回答by CodingWoodsman

I had the same issue, unable to resize the image when adjusting browser dimensions.

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

Bad Code:

错误代码：

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

Good Code:

好代码：

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

The key here is the addition of this element -> background-size: contain;

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

Answer 9

回答by Danny McMurray

Here's what worked for me:

以下是对我有用的内容：

background-size: auto 100%;

Answer 10

回答by anonymous

Setting background size does not help, the following solution worked for me:

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

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

It basically crops the image and makes it fit in, background-size: contain/coverstill didn't make it fit.

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

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

提问by spraff

回答by Zeta

Eggsplanation for `contain`and `cover`

Eggsplanation`contain`和`cover`

`contain`

`contain`

`cover`

`cover`

Demonstration with actual code

用实际代码演示

回答by Yauhen Yakimovich

回答by element119

回答by jignesh vasoya

回答by Laxman Maurya

回答by Ruto Collins

回答by Adriaan Mouton

回答by CodingWoodsman

回答by Danny McMurray

回答by anonymous

相关推荐

最近更新

标签

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

提问by spraff

回答by Zeta

Eggsplanation for containand cover

Eggsplanationcontain和cover

contain

contain

cover

cover

Demonstration with actual code

用实际代码演示

回答by Yauhen Yakimovich

回答by element119

回答by jignesh vasoya

回答by Laxman Maurya

回答by Ruto Collins

回答by Adriaan Mouton

回答by CodingWoodsman

回答by Danny McMurray

回答by anonymous

相关推荐

Markdown 中的 HTML

Html 你如何添加一个链接，将一个事件从 safari 添加到你的 iPhone 日历？

Html 如何链接到另一个页面上的 <div>？

Html 如何在同一列中的两个 DIV 之间制造间隙

相关推荐

最近更新

标签

Eggsplanation for `contain`and `cover`

Eggsplanation`contain`和`cover`

`contain`

`contain`

`cover`

`cover`