响应式 css 背景图像答案

【问题标题】：Responsive css background images响应式 css 背景图像
【发布时间】：2012-09-18 12:21:09
【问题描述】：

我有一个网站 (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;
}

【问题讨论】：

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

标签： css responsive-design background-image image-resizing

【解决方案1】：

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

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

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

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

【讨论】：

是否也可以自动调整宽度并固定高度？
是的，您可以设置图像的高度（以像素为单位）和以百分比为单位的宽度，但图像会被破坏。不会好看。
如果使用矢量格式，则可以使用小得多的图像：en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
什么？不设置容器的宽度，高度根本不会显示图像。
(1) 最初的问题是关于基于浏览器窗口大小的缩放。 (2) 像div 这样的元素从它们自己的内容中获取它们自己的高度，或者在弹性盒模型中占用可用空间。说没有明确的宽度/高度容器根本不会显示是不正确的。显然，如果你想显示一个带有背景图像的空 div，你需要设置高度，可能还有宽度，但是你只会看到图像的一部分，除非纵横比与图片本身。

【解决方案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;

【讨论】：

屏幕尺寸为 800x1280 像素时，图像在右侧被方框截断。所有其他尺寸似乎都很好。

【解决方案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%;

这应该可以解决问题！ :)

【讨论】：

这将根据浏览器窗口的纵横比完全扭曲图像。永远不要这样做。
仅供参考，实际上这样看起来不会很糟糕。 background-size: 100% 100% 会，但是只将 x 声明为 100% 可以防止它看起来很糟糕。测试用例：codepen.io/howlermiller/pen/syduB
它看起来不会“扭曲”，但如果图像比容器小，它会将图像拉伸到超出预期的比例......
接受的答案也是如此。 OP 没有询问这个问题，只是询问是否可以很好地调整大小。
顶部标识：backgorund-size:100%;background-position:top; padding-bottom:img-height/img-width x 100 = X%。

【解决方案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/

【讨论】：

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

【解决方案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 demo

【讨论】：

【解决方案7】：

这是我得到的最好方法。

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

查看w3schools

更多可用选项

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

【讨论】：

【解决方案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;
}

【讨论】：

这对我有用，没有relative 谢谢你。

【解决方案9】：

我用过

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

效果非常好。

【讨论】：

这就是我需要的代码！谢谢 :)) 我正在尝试在 100% 的屏幕上进行视差，但高度为 200 像素，我只需要背景的顶部，但保持整个图像的比例。

【解决方案10】：

通过在底部图像高度/宽度 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

【讨论】：

【解决方案11】：

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

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

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

【讨论】：

【解决方案12】：

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

享受:)

【讨论】：

【解决方案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>

【讨论】：

惊讶地看到这是唯一的答案，甚至提到了@media 查询——考虑到响应式 css 的主题，这非常令人惊讶。如果您的图像很大（文件大小），您可以创建不同大小的图像并为每个增加的分辨率添加不同的background 属性。这样一来，您就不会在小手机上下载巨大的图像。

【解决方案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%）

【讨论】：