我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事之外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用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;
}


评论

看看这个链接，可能是您要找的东西吗？ css-tricks.com/perfect-full-page-background-image
我觉得Christofer Vilander发布的此解决方案比所选答案更好。
只是想知道为什么该网站自2015年2月起并未真正实现您所要求的大小调整功能？它有问题吗？

#1 楼

如果要根据浏览器窗口的大小缩放同一图像：

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


请勿设置宽度，高度或边距。

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

评论

是否还可以自动调整宽度大小并固定高度？

– jochemke
2012年9月27日19:06
是的，您可以以像素为单位设置图像的高度，以百分比为单位设置宽度，但是图像会失真。看起来不太好。

– Andrei Volgin
2012年9月27日22:05
如果使用矢量格式，则可以使用小得多的图像：en.m.wikipedia.org/wiki/Scalable_Vector_Graphics

– Andrei Volgin
2012年9月28日上午8:30
什么？如果未设置宽度，则容器的高度根本不会显示图像。

–雪
16年11月11日在11:54
（1）最初的问题是关于基于浏览器窗口大小的缩放。 （2）像div这样的元素从其自身的内容中获得高度，或者在flexbox模型中占用可用空间。说没有显式的宽度/高度，容器根本不会显示是不正确的。显然，如果要显示一个带有背景图像的空div，则需要设置高度和可能的宽度，但是您只会看到图像的一部分，除非宽高比与图片本身。

– Andrei Volgin
16年11月11日在15:11

#2 楼

通过此代码，无论div大小如何变化，您的背景图像都会居中并固定其大小，适用于较小，较大，正常大小，最适合所有情况，我将其用于我的背景大小或div大小可以更改的项目中

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;


评论

在屏幕尺寸为800x1280px的情况下，该框在右侧被截断。其他所有尺寸似乎都不错。

–Mugé
16-10-28在16:54

#3 楼

试试这个：

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;


#4 楼

CSS：

background-size: 100%;


应该可以解决问题！ :)

评论

这将根据浏览器窗口的宽高比使图像完全失真。永远不要做。

– Andrei Volgin
2012年9月26日19:51
仅供以后参考，这种方式实际上看起来还不错。 background-size：100％100％可以，但是仅将x声明为100％可以避免看起来很糟糕。测试用例：codepen.io/howlermiller/pen/syduB

–提莫西·米勒（Timothy Miller）
2012年9月28日在21:45
它看起来不会“失真”，但是如果它比容器小，它将拉伸图像超出其预期的比例...

–代码更新
13年11月23日在9:43
接受的答案也将如此。 OP并没有询问该问题，只是是否有可能对其进行适当调整。

–提莫西·米勒（Timothy Miller）
2014年7月2日在21:20
此解决方案解决了我的问题。 +1

–JPeG
17年3月21日在16:09

#5 楼

这是我使用的响应式背景图像的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/

评论

小提琴中的代码（使用框架）与答案中的代码不同。

–雪
16年11月11日在12:29

#6 楼

这是一个简单的=）

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


看一下jsFiddle演示

#7 楼

这是我获得的最好方法。

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


检查w3schools

更多可用选项

background-size: auto|length|cover|contain|initial|inherit;


#8 楼

我使用了

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


效果很好。

评论

那就是我需要的代码！谢谢:)）我试图在屏幕的100％上进行视差，但高度为200px，并且我只需要背景的顶部，但要保持整个图像的比例。

– thinklinux
18年8月31日在13:31

#9 楼

#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}


#10 楼

通过在底部图像的高度/宽度x 100 =底部填充百分比中添加填充来进行响应的网站：

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


更复杂的方法：

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


尝试调整背景eq的大小Firefox Ctrl + M以查看魔术贴，我认为最好的脚本是：

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

#11 楼

您可以使用它。我已经测试过并且其工作100％正确：

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


您可以在此Screen Size Simulator上以响应速度测试您的网站：
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) ;

享受:)

#12 楼

如果要显示整个图像而不考虑宽高比，请尝试以下操作：

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


无论屏幕大小如何，它都将显示整个图像。

#13 楼

    <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>


#14 楼

只需两行代码，它就可以工作。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}


#15 楼

使用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");
    }


#16 楼

background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;


或

background-size:100%;


#17 楼

我认为，做到这一点的最佳方法是：

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


这样就不需要做更多的事情，而且非常简单。

至少对我有用。

我希望对您有用。

#18 楼

尝试使用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;


#19 楼

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;


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