Question

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

我尝试了不同的方法（使用例如4：3图像和16：9视口）首先，将background-size contain cover和<body>应用于cover代码：

contain它尊重纵横比但是在顶部和底部裁剪图像
body它不会覆盖整个视口，但实际上只有background-size: auto 100%;

同样使用contain产生与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; }

相同的效果

这是我使用的CSS代码：

{{1}}

Answer 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;
 }

现在我只是添加一些其他背景图案以避免左右空白区域的单色;

Answer 2

更新你的css：

background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */

全高背景图像中心宽度

2 个答案: