响应式CSS背景图像

195

我有一个网站（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  responsive-design  background-image  image-resizing 
— Jochemke
source
7
看一下此链接，可能就是您要找的链接吗？css-tricks.com/perfect-full-page-background-image
— Christofer Vilander
我觉得Christofer Vilander发布的此解决方案比所选答案更好。
— CU3ED 2013年
只是想知道为什么该网站自2015年2月起并未真正实现您所要求的大小调整功能？那里有问题吗？
— LegendLength

Answers:

366

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

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

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

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

— 安德烈·沃尔金（Andrei Volgin）
source
3
是否还可以自动调整宽度大小并固定高度？
— jochemke 2012年
3
是的，您可以以像素为单位设置图像的高度，以百分比为单位设置宽度，但是图像会失真。看起来不太好。
— Andrei Volgin 2012年
2
如果您使用矢量格式，则可以使用小得多的图像：en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
— Andrei Volgin
9
什么？没有设置宽度，高度的容器将完全不显示图像。
— 下雪
3
（1）最初的问题是关于基于浏览器窗口大小的缩放。（2）诸如元素之类的元素div可以从其自身的内容中获得高度，或者在flexbox模型中占用可用空间。说没有显式的宽度/高度，容器根本不会显示是不正确的。显然，如果要显示一个带有背景图像的空div，则需要设置高度和可能的宽度，但是您只会看到图像的一部分，除非宽高比与图片本身。
— Andrei Volgin
69

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

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
— 彭萨迪
source
在屏幕尺寸为800x1280px的情况下，该框在右侧被截断。其他所有尺寸似乎都不错。
— 穆杰
52

试试这个 ：

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
— 阿肖克·迪（Ashok Dey）
source
33

CSS：

background-size: 100%;

这应该够了吧！:)

— 蒂莫西·米勒
source
27
这将完全基于浏览器窗口的宽高比使图像失真。永远不要做。
— Andrei Volgin
8
仅供以后参考，这样看起来实际上并不坏。background-size：100％100％可以，但是仅将x声明为100％可以避免看起来很糟糕。测试案例：codepen.io/howlermiller/pen/syduB
— Timothy Miller
1
它看起来不会“失真”，但是如果它比容器小，它将使图像拉伸超出其预期的比例...
— Code Novitiate 2013年
1
接受的答案也将如此。OP并没有问这个问题，只是问是否有可能使其调整得很好。
— 蒂莫西·米勒
1
此解决方案解决了我的问题。+1
— JPeG
22

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

— 拉南
source
小提琴中的代码（使用框架）与答案中的代码不同。
— 下雪
14

这是一个简单的=）

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

看看jsFiddle演示

— 奥马尔
source
13

这是我得到的最好方法。

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

检查 w3schools

更多可用选项 

background-size: auto|length|cover|contain|initial|inherit;
— 皮尤什
source
9

我用了 

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

真的很好

— 冬青
source
那就是我需要的代码！谢谢:)）我试图在屏幕的100％上进行视差，但高度为200px，我只需要背景的顶部，但要保持整个图像的比例。
— thinklinux '18
8 
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}
— 阿米特·本德
source
4

您可以使用它。我已经测试过，并且它的工作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) ;

请享用 ：）

— 杰克·斯派洛
source
4

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

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

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

— 穆巴沙尔·阿巴斯
source
3 
    <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>
— 吲哚尼
source
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");
    }
— OVNI
source
2 
background:url("img/content-bg.jpg") no-repeat;
background-position:center; 
background-size:cover;

要么 

background-size:100%;
— bsngr
source
0

我认为，最好的方法是：

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

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

至少，它对我有用。

希望对您有所帮助。

— 用户名
source
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;
— Runsis
source
0 
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

根据您的需要，可以使用position属性将顶部和底部对齐，并且可以将背景尺寸用于中心裁切（封面）或完整图像（包含100％或100％）

— 第44章
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.