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

CSS

小小仲羽

2020-03-16

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

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

在该img标签中放置一个标签，然后使用CSS向该img标签致敬。

width:100%; height:100%;

它可以工作，但是这个问题有点老了，并指出在CSS 3中调整背景图像的大小将非常有效。我已经在第一个例子中尝试过这个例子，但是对我来说却没有用。

有没有一个很好的方法来处理background-image声明？

第1676篇《在背景中拉伸和缩放CSS图像-仅使用CSS》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共18个回答

Jim米亚西里 2020.03.16

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

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

LEY樱 2020.03.16

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

我以前做过，而且并不难。此外，我认为拉伸只会损害背景质量。而且，如果您添加大图像，则会减慢计算机和浏览器的运行速度。

Stafan梅 2020.03.16

如果要使内容水平居中，请使用以下组合：

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

这看起来会很漂亮。

ItachiPro古一 2020.03.16

使用此CSS：

background-size: 100% 100%

Harry小卤蛋 2020.03.16

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

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

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

Tom伽罗 2020.03.16

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

因为甚至我都可以使用它，所以证明它是一个易于使用的插件:)。

西门神乐 2020.03.16

谢谢！

但是后来它不适用于谷歌浏览器和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，正文{height：100％;}
#page {background：#ffffff; 高度：自动！重要；高度：100％；最小高度：100％；位置：相对；}

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

<img alt =“” class =“ stretch” src =“ pic.url” />

仅在该Drupal块中使用编辑器复制图片不起作用；必须将编辑器更改为非格式文本。

神无猪猪 2020.03.16

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

<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 background-stretch方法。

另外，对于SEO，我会将背景图像放在页面底部，但是如果背景图像加载时间太长（即最初带有白色背景），则可以移至页面顶部。

神奇A梅 2020.03.16

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

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

LEY乐猴子 2020.03.16

我想居中并缩放背景图像，而无需将其拉伸到整个页面，并且我希望保持宽高比。这对我有用，这要归功于其他答案中建议的变化形式：

内联图像：------------------------

<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%;
}

路易Sam神无 2020.03.16

您可以将此类添加到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支持非供应商前缀版本）

小小猴子 2020.03.16

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

猴子樱 2020.03.16

它由CSS技巧解释：完美的整页背景图片

演示：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;
}

阿飞小卤蛋达蒙 2020.03.16

background-size: 100% 100%;

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

樱Davaid 2020.03.16

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*/
}

西里村村 2020.03.16

使用我提到的代码 ...

的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似乎会容易得多。

逆天LLEY 2020.03.16

CSS3有一个很好的小属性，称为background-size:cover。

这样可以缩放图像，以使背景区域完全被背景图像覆盖，同时保持宽高比。整个区域将被覆盖。但是，如果调整大小后的图像的宽度/高度太大，则部分图像可能不可见。

飞云西门Near 2020.03.16

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