在后台拉伸和缩放CSS图像-仅使用CSS

853

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

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

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

width:100%; height:100%;

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

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

css  background 
— 法比奥·安特尼斯（FábioAntunes）
source
113
背景大小：100％100％；
— Andreas L.
5
也许这个演示会有所帮助：w3schools.com/cssref/…–
— Davide，
1
— Alex Angas
@AlexAngas问题的年龄不应该成为一个因素吗？这个问题是6年前提出的，而您指出的问题是4年前提出的。
— 法比奥·安特尼斯（FábioAntunes）
@FábioAntunes恕我直言，我们不想以最佳答案结束问题，而是鼓励重复者链接到该问题。我确定这会在Meta上进行讨论，但现在找不到了……
— Alex Angas

Answers:

1047

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

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

— 瓦希莎（Vashishtha Jogi）
source
11
如果宽高比不匹配，则Cover会裁剪图像，因此这不是一个很好的常规解决方案。
— mahemoff 2013年
1
万一您希望它在IE浏览器中工作 -github.com/louisremi/background-size-polyfill
— Wreeecks 2014年
4
它似乎在Firefox上不起作用。但是，background-size: 100vw 100vh;技巧很好。
— Yannick Mauray
5
@YannickMauray尝试： background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
如果你想要这个，但只为横轴，使用此：background-size: 100% auto; stackoverflow.com/questions/41025630/...
— antoineMoPa
470

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

background-size: 100%;
— 马特·伯吉斯
source
19
@nXqd几乎是完整代码！使用创建一个容器，background-image并包含上面的属性。如前所述，浏览器支持还不是很好，并且有特定于浏览器的版本。-webkit-background-size等等。请参见W3C CSS3模块：background-size和css3.info：background-size
— MrWhite 2011年
15
要保留图像的长宽比，应使用“ background-size：cover;”。或“ background-size：包含；”。我建立了一个可在IE8中实现这些值的polyfill
— -Rémi
4
也建议添加auto以保留宽高比。
— Chibueze Opata
186

使用我提到的代码 ...

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

— 法比奥·安特尼斯（FábioAntunes）
source
12
但这不是背景图像。您只能对块执行此操作，而不能对内联元素（例如input [type = text]）执行此操作。还是我错了？
— deerchao 2011年
11
不需要class =“ stretch”，只需在CSS中使用#background img {}作为标识符
— BerggreenDK
z索引：-1；将您的图片保留在背景中。如果您希望在前景中显示图像，则可以增加z-index值或删除该索引。
— gokhanakkurt 2013年
我遇到的问题与IE8有关。DIV的背景图像拉伸满了，但是在IE8中，图像超出了DIV，因此无法看到完整图像。它被裁剪掉了。这里是我的问题：stackoverflow.com/questions/22331179/...
— SI 8
1
人们要做的明显错误是将背景图像放在css中（即by background : url("example.png");），然后使用其background-size:100%;下方的css属性希望将图像缩放到屏幕宽度。这行不通，是吗？如果您希望为body放置背景图像，则应将image属性添加到body标签，例如<body background="example.png">。然后使用css对其background-size:100%;进行缩放。
— sjsam，2015年
166

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*/
}
— 乔什·克罗泽（Josh Crozier）
source
但是，这在IE8中不起作用。它在窗口的顶部和底部创建边距。
— erdomester
在Android上，它适用于html, body {...}而不是body {...}。
— 爱德华
53 
background-size: 100% 100%;

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

— yeahdixon
source
40

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

我为每个页面动态地执行此操作。因此，我使用PHP为每个页面生成自己的HTML标签。所有图片都在“图像”文件夹中，并以“ 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进行了测试。

— 托斯滕·尼维斯（Thorsten Niehues）
source
2
您的示例在向后兼容性方面不起作用，因为您只是忘记了供应商前缀的前导“-”。它必须是-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;
— VolkerE。13年
这是唯一适用于IE9的解决方案。谢谢。
— robnick
17

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

— 金·斯特贝尔
source
那就是我在其他问题中看到的问题，并且可以使用，但是自从CSS3问世以来，我认为现在是一种更好的解决方案。
— 法比奥·安图内斯
3
可能并考虑到浏览器使用方面的发展，您可能仅能在... 10年内将其商业使用？
— 金·斯特贝尔（09年
作为CSS3，使用最现代的浏览器可以看到的属性并为不受支持的浏览器提供最低标准没有错。例如，在这里，对于<IE8，您可以使用无聊但可以接受的平铺背景，而对于Firefox / Chrome / Safari / Opera，可以使用精美的图片。另外，有很多polyfill可以在使用JavaScript的旧版浏览器中复制CSS3功能。换句话说，您无需等待所有浏览器都支持CSS3即可使用它。
— 丹
刚刚发现这个其他职位它引用使用专有MS AlphaImageLoader的的：stackoverflow.com/questions/2991623/...
— uglymunky
17

使用此CSS：

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

它由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;
}
— 阿默·沙扎德（Aamer Shahzad）
source
基于以上答案，我已经看到后台附件修复在移动设备和Microsoft Edge上不起作用。我推荐jquery-backstretch.com
— Aamer Shahzad
15

您可以将此类添加到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支持非供应商前缀版本）
— 阿伦拉吉
source
这是一个可行的“适应”的答案。注意：长宽比会改变。
— devdrc
10

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

background-size: contain;
background-repeat: no-repeat;
— 贾斯汀皮斯
source
9

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

<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>
— 马赫迪·乔卡尔
source
9

谢谢！

但是后来对于 谷歌浏览器和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块中使用编辑器复制图片不起作用；必须将编辑器更改为非格式文本。

— 赛博
source
8

我同意绝对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，我会将背景图像放在页面底部，但是如果背景图像加载时间太长（即最初带有白色背景），则可以移至页面顶部。

— 迈克·布莱克
source
然后不要只使用img与bg一起使用div，就不应该选择img
— Jacek Pietal 2013年
7

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

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

<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%;
}
— 安妮·迪
source
5

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

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

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

— 瑞安·登·卡特
source
4

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

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

— 丹尼尔
source
1

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

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

— 纳特什·巴特
source
0

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

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

— 马里奥·里卡德
source
好点子。但是我使用jpg作为背景图片，她的分辨率约为1500x1000，只需要100kb以上。但是你是怎么做到的呢？
— 法比奥·安特尼斯（FábioAntunes）
1
如何将图像水平居中并用纯色或图案柔化图像边缘？如果用户拥有比图像分辨率更高的分辨率，这将使您无缝适应。
— MarioRicalde
但是我希望图像充满背景。你的一句话，那就是我通常所做的。
— 法比奥·安图内斯
0

以下对我有用。

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

涵盖了不同维度的整个背景

— tony2tones
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.