214

我有一个网站（g-floors.eu），我想让背景（在 css 中我为内容定义了一个 bg-image）也响应。不幸的是，我真的不知道如何做到这一点，除了我能想到的一件事，但这是一种解决方法。创建多个图像，然后使用 css 屏幕大小来更改图像，但我想知道是否有更实用的方法来实现这一点。

基本上我想要实现的是图像（带有水印'G'）会自动调整大小而不会显示更少的图像。如果可以当然

链接：g-floors.eu

我到目前为止的代码（内容部分）

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}
4

19 回答 19

401

如果您希望根据浏览器窗口的大小缩放相同的图像：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

不要设置宽度、高度或边距。

编辑：关于不设置宽度、高度或边距的上一行是指 OP 关于随窗口大小缩放的原始问题。在其他用例中，您可能需要在必要时设置宽度/高度/边距。

于 2012-09-26T19:51:02.147 回答
78

通过此代码，您的背景图像将居中并固定它的大小，无论您的 div 大小发生什么变化，适用于小、大、正常大小，最适合所有人，我将它用于我的背景大小或 div 大小可以更改的项目

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
于 2013-11-16T20:12:23.367 回答
58

试试这个 ：

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
于 2014-03-17T22:43:35.583 回答
36

CSS：

background-size: 100%;

这应该够了吧！:)

于 2012-09-26T19:49:18.437 回答
23

这是我使用的响应式背景图像的 sass mixin。它适用于任何block元素。当然，同样可以在纯 CSS 中工作，您只需padding手动计算即可。

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

示例http://jsfiddle.net/XbEdW/1/

于 2013-11-25T15:57:10.987 回答
21

这是一个简单的=）

body {
    background-image: url(http://domains.com/photo.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

看看jsFiddle 演示

于 2017-01-28T04:28:02.060 回答
14

这是我得到的最好方法。

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

检查w3schools

更多可用选项

background-size: auto|length|cover|contain|initial|inherit;
于 2015-04-22T05:20:21.147 回答
12 
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}
于 2016-11-24T06:05:38.277 回答
9

我用了

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

效果很好。

于 2013-11-16T18:36:39.167 回答
6

通过在底部图像高度/宽度 x 100 = padding-bottom % 中添加填充来响应网站：

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

更复杂的方法：

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

尝试调整背景 eq Firefox Ctrl + M 以查看我认为最好的神奇脚本：

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

于 2014-07-25T08:27:45.703 回答
5

你可以使用这个。我已经测试并且它的工作100％正确：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

您可以在此屏幕尺寸模拟器上测试您的网站的响应能力：http: //www.infobyip.com/testwebsiteresolution.php

每次进行更改时清除缓存，我更喜欢使用 Firefox 来测试它。

如果您想使用其他站点/URL 的图像而不喜欢： background-image:url('../images/bg.png'); //此结构是使用您自己托管服务器中的图像。然后像这样使用： background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

享受 ：）

于 2013-04-26T15:07:15.287 回答
5

如果您希望无论纵横比如何都显示整个图像，请尝试以下操作：

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

无论屏幕尺寸如何，这都会显示整个图像。

于 2017-02-10T13:51:40.717 回答
4 
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>
于 2016-12-03T15:09:53.477 回答
3

只需两行代码，就可以了。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}
于 2017-01-23T06:20:09.873 回答
2

使用 jQuery 自适应平方比

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }
于 2013-06-15T10:10:01.160 回答
2 
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

或者

background-size:100%;
于 2014-09-08T14:24:16.043 回答
0

我认为，最好的方法是：

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

这样就无需再做任何事情，而且非常简单。

至少，它对我有用。

我希望它有所帮助。

于 2014-04-25T13:18:54.107 回答
0

尝试使用background-size但使用两个参数一个用于宽度，另一个用于高度

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;
于 2019-11-12T01:39:30.713 回答
0 
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

position 属性可用于根据需要对齐顶部底部和中心，背景尺寸可用于中心裁剪（封面）或完整图像（包含或 100%）

于 2020-02-21T12:56:40.460 回答