3

我有一个 4:3 宽高比的图像作为背景图像。
我的第一个目标是拥有一个全高图像，根据高度调整大小，宽度可变（取决于高度）。图像应居中。
例如，如果我有一个 16:9 的视口，它应该显示以左右空格为中心的背景图像。

我尝试了不同的方法（以 16:9 视口的 4:3 图像为例）。
首先，background-sizewithcontain和 with都cover应用于<body>标签：

  • 它尊重纵横比，cover但在顶部和底部裁剪图像
  • 它并contain没有覆盖整个视口，但实际上只有body

也使用background-size: auto 100%;产生相同的效果contain

这是我使用的 CSS 代码：

 body#home {
  background-image: url(../bg.jpg);
  background-size: auto 100%;
  -moz-background-size: auto 100%;
  -webkit-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
4

2 回答 2

1

感谢@Pete，有了这段代码，它实际上可以工作：

html, body {
  min-height: 100%;
}
body#home {
  background-image: url(../ppersia-home.jpg);
  background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  -o-background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
 }

现在我只需添加一些其他背景图案，以避免左右空白处出现单色

于 2013-07-26T16:17:16.220 回答
0

更新你的 CSS：

background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */
于 2013-07-26T15:53:38.590 回答