首页 文章

全高背景图像中心宽度

提问于
浏览 次
3

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

我尝试了不同的方法（使用例如4：3图像和16：9视口） .
首先， background-size __847045_和 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;
 }
html css3 background-image

2 回答

  • 0

    感谢@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;
 }

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

    回复于
  • 1

    更新你的CSS：

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

相关问题