在背景中拉伸和缩放 CSS 图像 - 仅使用 CSS答案

【问题标题】：Stretch and scale a CSS image in the background - with CSS only在背景中拉伸和缩放 CSS 图像 - 仅使用 CSS
【发布时间】：2010-11-12 02:50:39
【问题描述】：

我希望我的背景图像根据浏览器视口大小进行拉伸和缩放。

我在 StackOverflow 上看到了一些可以解决问题的问题，例如 Stretch and scale CSS background。它运作良好，但我想使用background 放置图像，而不是使用img 标签。

在其中放置了一个img标签，然后我们用CSS向img标签致敬。

width:100%; height:100%;

它有效，但这个问题有点老了，并指出在 CSS 3 中调整背景图像的大小会很好。我试过这个example the first one，但对我没有用。

有没有使用background-image 声明的好方法？

【问题讨论】：

背景尺寸：100% 100%;
也许这个演示会有所帮助：w3schools.com/cssref/…
CSS background image to fit width, height should auto-scale in proportion的可能重复
您应该明确是希望纵横比更改为缩放，还是仅在高度或宽度上缩放，并让其他维度保持该纵横比。

标签： css background

【解决方案1】：

CSS3 有一个不错的小属性，叫做background-size:cover。

这会缩放图像，使背景区域完全被背景图像覆盖，同时保持纵横比。将覆盖整个区域。但是，如果调整后的图像的宽度/高度太大，则可能无法看到部分图像。

【讨论】：

如果长宽比不匹配，则覆盖裁剪图像，因此这不是一个好的通用解决方案。
如果您希望它在 IE 浏览器中工作 - github.com/louisremi/background-size-polyfill
它似乎不适用于 Firefox。但是，background-size: 100vw 100vh; 做得很好。
@YannickMauray 尝试：background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
如果你想要这个，但仅限于水平轴，使用这个：background-size: 100% auto;stackoverflow.com/questions/41025630/…

【解决方案2】：

以下对我有用。

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

在不同维度上覆盖整个背景

【讨论】：

我们在这里讨论的版本是多少？我也相信 IE 已经停产了。

【解决方案3】：

为了根据容器大小适当地缩放图像，请使用以下命令：

background-size: contain;
background-repeat: no-repeat;

【讨论】：

【解决方案4】：

您可以将此类添加到您的 CSS 文件中。

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

它适用于：

Safari 3 或更高版本
Chrome 不管是什么或更高版本
Internet Explorer 9 或更高版本
Opera 10 或更高版本（Opera 9.5 支持background-size，但不支持关键字）
Firefox 3.6 或更高版本（Firefox 4 支持非供应商前缀版本）

【讨论】：

这是一个有效的“拉伸以适应”答案。注意：纵横比会改变。

【解决方案5】：

background-size: 100% 100%;

拉伸背景以填充两个轴上的整个元素。

【讨论】：

【解决方案6】：

您可以使用 border-image : yourimage 属性将图像放大到边框。即使您提供背景图像，也会在其上绘制边框图像。

如果您的样式表在不支持 CSS 3 的地方实现，border-image 属性非常有用。如果您使用的是 Google Chrome 或 Firefox，那么我推荐使用 background-size:cover 属性本身。

【讨论】：

【解决方案7】：

用 CSS 技巧解释：Perfect Full Page Background Image

演示：https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

代码：

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

基于上述答案，我看到背景附件修复不适用于移动设备和 Microsoft Edge。在我推荐的所有设备和浏览器上进行背景拉伸和修复的完美解决方案jquery-backstretch.com

【解决方案8】：

我使用了 background-X CSS 属性的组合来实现理想的缩放背景图像。

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

这使得背景始终覆盖整个浏览器窗口并在缩放时保持居中。

【讨论】：

【解决方案9】：

如果您想让内容水平居中，请使用如下组合：

background-repeat: no-repeat;
background-size: cover;
background-position: center;

这看起来会很漂亮。

【讨论】：

【解决方案10】：

使用这个 CSS：

background-size: 100% 100%

【讨论】：

Downwoted，这是之前答案stackoverflow.com/a/35021247/3810453的副本

【解决方案11】：

以下 CSS 部分应使用所有浏览器拉伸图像。

我为每个页面动态地执行此操作。因此，我使用 PHP 为每个页面生成自己的 HTML 标记。所有图片都在“image”文件夹中，并以“Bg.jpg”结尾。

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

如果您的所有页面只有一张背景图片，那么您可以删除 $pic 变量、删除转义反斜杠、调整路径并将此代码放入您的 CSS 文件中。

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

已使用 Internet Explorer 9、Chrome 21 和 Firefox 14 进行了测试。

【讨论】：

您的示例在向后兼容性方面不起作用，因为您只是忘记了供应商前缀的前导“-”。必须是-webkit-background-size、-moz-background-size 等等。请参阅developer.mozilla.org/en-US/docs/CSS/… 或者您将其包含在诸如background: url(img/bg-home.jpg) no-repeat center center / cover fixed; 之类的速记属性中以防未来

【解决方案12】：

我同意绝对 div 中具有 100% 宽度和高度的图像。确保在 CSS 中为 body 设置 100% 的宽度和高度，并将边距和填充设置为零。使用此方法您会发现的另一个问题是，在选择文本时，选择区域有时会包含背景图像，这会导致整个页面处于选中状态。您可以使用user-select:none CSS 规则来解决这个问题，如下所示：

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

同样，Internet Explorer 在这里是个坏人，因为它无法识别用户选择选项 - 甚至 Internet Explorer 10 预览也不支持它，因此您可以选择使用 JavaScript 来阻止背景图像选择（例如例如，http://www.felgall.com/jstip35.htm) 或使用CSS 3 背景拉伸方法。

另外，对于SEO，我会将背景图片放在页面底部，但如果背景图片加载时间过长（即最初为白色背景），您可以移至顶部页面。

【讨论】：

那么不要使用 img 只是一个带有 bg 的 div 它不应该被选中

【解决方案13】：

使用我提到的code...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

这会产生预期的效果：只有内容会滚动，而不是背景。

背景图像可根据浏览器视口调整大小以适应任何屏幕尺寸。当内容不适合浏览器视口，并且用户需要滚动页面时，背景图像在内容滚动时保持固定在视口中。

使用 CSS 3，这似乎会容易得多。

【讨论】：

但这不是背景图片。您只能对块执行此操作，而不能对诸如 input[type=text] 之类的内联元素执行此操作。还是我错了？
不需要 class="stretch"，只需在 css 中使用 #background img {} 作为标识符
z-index: -1;将您的图像保留在背景中。如果您希望在前景中显示您的图像，您可以增加 z-index 值或删除该索引。
我遇到的问题是 IE8。 DIV 的背景图像完全拉伸，但在 IE8 中，图像超出了 DIV，因此无法看到完整图像。它被裁剪掉了。这是我的问题：stackoverflow.com/questions/22331179/…
人们犯的明显错误是将背景图像放在css中（即background : url("example.png");），然后使用其下方的css属性background-size:100%;希望将图像缩放到屏幕宽度。这行不通，会吗？如果您希望为正文添加背景图像，则应将图像属性添加到正文标记中，例如<body background="example.png">。然后使用 css background-size:100%; 对其进行缩放。

【解决方案14】：

CSS：

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

【讨论】：

但是，这在 IE8 中不起作用。它会在窗口的顶部和底部创建一个边距。
在 Android 上使用 html, body {...} 而不是 body {...} 时有效。

【解决方案15】：

使用Backstretch 插件。一个甚至可以有几张图片幻灯片。它也适用于容器。例如，这种方式可能只有一部分背景被背景图像覆盖。

因为即使我可以让它工作证明它是一个易于使用的插件:)。

【讨论】：

【解决方案16】：

谢谢！

但后来它不适用于 Google Chrome 和 Safari 浏览器（拉伸有效，但图片的高度只有 2 毫米！），直到有人告诉我缺少什么：

尝试设置height:auto;min-height:100%;

因此，为您的 height:100%; 行更改它，给出：

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

就在新添加的代码之前，我的 Drupal Tendu 主题 style.css 中有这个：

html, body{height:100%;}
#page{背景：#ffffff;高度：自动！重要；高度：100%；最小高度：100%；位置：相对；}

然后我必须在 Drupal 中用图片创建一个新块，同时添加class=stretch：

只是在 Drupal 块中使用编辑器复制图片是行不通的；必须将编辑器更改为非格式化文本。

【讨论】：

【解决方案17】：

我想将背景图像居中并缩放，而不是将其拉伸到整个页面，并且我希望保持纵横比。由于其他答案中建议的变化，这对我有用：

内嵌图片：------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

【讨论】：

【解决方案18】：

我用这个，它适用于所有浏览器：

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

【讨论】：

【解决方案19】：

您想仅使用一张图片来实现这一目标吗？因为您实际上可以使用两个图像制作类似于拉伸背景的效果。例如PNG 图片。

我以前做过，并不难。此外，我认为拉伸只会损害背景的质量。如果你添加一个巨大的图像，它会降低计算机和浏览器的速度。

【讨论】：

好点。但是我使用 jpg 作为背景图片，shes 大约是 1500x1000，只需要 100kb 多一点。但是你是怎么做到的？
如何将图像水平居中并用纯色或图案柔化图像边缘？如果用户的分辨率超过图像分辨率，这将允许您进行无缝适配。
但我希望图像填充背景。你说的那句话，那是我通常做的。

【解决方案20】：

使用这个 CSS：

background: url('img.png') no-repeat; 
background-size: 100%;

【讨论】：

【解决方案21】：

您可以使用 CSS3 属性很好地做到这一点。它会根据比例调整大小，因此不会出现图像失真（尽管它会放大小图像）。请注意，它尚未在所有浏览器中实现。

background-size: 100%;

【讨论】：

@nXqd 这几乎就是完整的代码！使用background-image 创建一个容器并包含上面的属性。如前所述，浏览器支持还不是很好，并且有浏览器特定版本的 ie。 -webkit-background-size 等。见W3C CSS3 Module: background-size 和css3.info: background-size
要保留图像的纵横比，您应该使用“background-size:cover;”或“背景尺寸：包含；”。我已经构建了一个在 IE8 中实现这些值的 polyfill：github.com/louisremi/background-size-polyfill
建议添加auto 以保持纵横比。

【解决方案22】：

您实际上可以使用 img 标签实现与背景图像相同的效果。您只需将其 z-index 设置为低于其他所有内容，设置 position:absolute 并为前景中的每个框使用透明背景。

【讨论】：

这就是我在其他 SO 问题中看到的，并且有效，但是自从 CSS3 出来后，我认为现在是一个更好的方法。
考虑到浏览器使用的发展，您可能能够在仅...10年内将它们用于商业用途？
作为 CSS3，使用大多数现代浏览器都能看到的属性并为不受支持的浏览器提供最低标准并没有错。例如，在这里，您可以为
刚刚发现这篇文章引用了专有 MS AlphaImageLoader 的使用：stackoverflow.com/questions/2991623/…