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

Posted 2023-03-06

【中文标题】CSS背景图像以适应宽度，高度应按比例自动缩放

【英文标题】：CSS background image to fit width, height should auto-scale in proportion

【发布时间】：2012-03-04 23:49:59

【问题描述】：

我有

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

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

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

此外，Chrome 将图像置于中心，不再重复，即使明确给出了background-repeat:repeat，这也是默认设置。

【问题讨论】：

html, body height: 100%; 有帮助吗？另外，cough.

对于任何来这里尝试这样做的人，您可能还需要在您的 svg 本身上设置preserveAspectRatio: "none"（编辑其源代码）。见***.com/questions/11658173/…

【参考方案1】：

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

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

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

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

第一个回答以下问题：

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

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

希望这会有所帮助。

【参考方案2】：

为此有一个 CSS3 属性，即background-size (compatibility check)。虽然可以设置长度值，但它通常与特殊值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 的彩蛋

对不起，双关语不好，但我将使用picture of the day by Biswarup Ganguly 进行演示。假设这是您的屏幕，灰色区域在您的可见屏幕之外。为了演示，我将假设一个 16x9 的比例。

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

contain

contain

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

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

cover

cover

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

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

用实际代码演示

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>

【讨论】：

这正是我想要的，谢谢。它似乎不适用于 Chrome（或至少是 Chromium）——有什么好主意吗？

根据quirksmode.org/css/contents.html#t44，它应该可以在没有任何前缀的情况下在 Chrome 中工作。但是，您是否尝试过 -webkit- 前缀？

Yauhen 的答案（在本页底部）实际上是我想要的：background-size: contain

@DannyBeckett：虽然这是可能的，但这不是 OP 想要的：“我想垂直裁剪，然后滚动：没有水平重复。”

contain 就像缩放适合。 cover 就像缩放填充。 contain 调整图像大小以匹配宽度和高度中较大的尺寸。 cover 调整图像大小以匹配宽度和高度中较小的尺寸。

【参考方案3】：

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

【讨论】：

虽然我使用了background-position: center;，但这对我来说确实比backgound-size: cover;更有效。

我可以知道为什么我们需要overflow-y: hidden 部分吗？

【参考方案4】：

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

错误代码：

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;

【参考方案5】：

试试这个，

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

【参考方案6】：

只需添加这一行：

    .your-class 
        height: 100vh;
    

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

在此处查看更多信息：Make div 100% height of browser window

【参考方案7】：

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

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

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

【参考方案8】：

这对我有用：

background-size: auto 100%;

【参考方案9】：

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

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

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

【参考方案10】：

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

【讨论】：

描述具体是什么问题以及如何解决的，请不要在这里粘贴一堆代码而不解释。