logo标签列表

响应式CSS背景图片

cssresponsive-designbackground-imageimage-resizing
227

我有一个网站 (g-floors.eu)，我想使背景图片 (在 CSS 中我已经定义了内容的背景图像) 也具有响应能力。不幸的是，除了一个思路之外，我真的不知道该怎么做，但这是一个相当麻烦的方法。创建多个图像，然后使用 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;
}
7
请看这个链接，它可能是你在寻找的东西：http://css-tricks.com/perfect-full-page-background-image/ - Christofer Vilander
我觉得Christofer Vilander发布的这个解决方案比被选中的答案更好。 - CU3ED
只是想知道为什么该网站在2015年2月之后没有实现你所询问的调整大小功能？有什么问题吗？ - LegendLength
19个回答
424

如果您希望同一张图片基于浏览器窗口的大小进行缩放：

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

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

编辑： 关于不要设置宽度、高度或边距的前一行是针对原问题中与窗口大小的缩放有关的。在其他用例中，如果有必要，您可能需要设置宽度、高度或边距。

4
可以自动调整宽度，而让高度固定吗？ - jochemke
4
是的，你可以将图片的高度设置为像素值，将宽度设置为百分比，但这样会使图片变形，不太美观。 - Andrei Volgin
2
如果使用矢量格式，您可以使用更小的图像：http://en.m.wikipedia.org/wiki/Scalable_Vector_Graphics - Andrei Volgin
17
什么？如果不将宽度和高度设置为容器大小，图片将完全不会显示。 - snow
3
(1) 原问题是关于基于浏览器窗口大小进行缩放的。 (2) div等元素从其自身内容中获得自己的高度，或在flexbox布局模型中占用可用空间。如果没有显式指定宽度/高度，就不能说容器根本不会显示出来。显然，如果您想显示带有背景图像的空div，则需要设置高度，并可能设置宽度，但这样做将只能看到图像的一部分，除非纵横比与图像本身完全相同。 - Andrei Volgin
显示剩余9条评论
81

通过这段代码，您的背景图片可以居中并固定大小，无论您的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像素时，图像被框盒子右侧裁剪。其他所有尺寸看起来都没问题。 - Mugé
69

试试这个：

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

CSS：

background-size: 100%;

那应该就可以了！:)

32
这样做会完全扭曲基于浏览器窗口纵横比的图像。绝对不要这样做。 - Andrei Volgin
8
仅供以后参考，这种方式实际上看起来并不糟糕。使用"background-size: 100% 100%"会让它看起来很糟糕，但只声明x为100%，可以避免出现丑陋的效果。测试用例：http://codepen.io/howlermiller/pen/syduB - Timothy Miller
1
如果图像尺寸小于容器，则会拉伸图像超出其预期比例。 - Pure Function
2
所以被接受的答案也是如此。原帖并没有询问那个问题，只是想知道是否有可能使其能够良好地调整大小。 - Timothy Miller
顶部标志：backgorund-size:100％; background-position:top; padding-bottom:img-height/img-width x 100 = X％。 - user956584
当您期望从宽度/高度维度获得响应时，该技巧在调整大小方面并不完全有效。 - Masoud
23

这是我使用的响应式背景图sass mixin。它适用于任何块级元素。当然，相同的效果可以在纯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/

Fiddle中的代码（使用框架）与答案中的代码不同。 - snow
22

这是一个简单的问题 =)

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

看一下jsFiddle演示

14

这是我得到的最好方法。

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

在 w3schools 上查看。

更多可用选项。

background-size: auto|length|cover|contain|initial|inherit;
13
#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。谢谢你。 - Saad Abbasi
10

我使用了

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

效果非常好。

那就是我需要的代码！谢谢 :)) 我正在尝试在整个屏幕上实现视差效果，但高度为200像素，我只需要背景的顶部部分，但要保持整个图像的比例。 - thinklinux
6
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接