全高背景圖像中心寬度

Question

我有一個4：3寬高比圖像作為背景圖像。
我的第一個目標是擁有一個全高的圖像，根據高度調整大小，寬度可變（取決於高度）。 圖像應居中。
例如，如果我有一個16：9視口，它應該顯示以左右空格為中心的背景圖像。

我嘗試了不同的方法（使用例如4：3圖像和16：9視口）。
首先， background-size contain應用於<body>標記的contain和cover ：

cover它尊重縱橫比，但在頂部和底部裁剪圖像
with 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;
 }

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 個解決方案

解決方案1
1 2013-07-26 16:17:16

解決方案2
0 2013-07-26 15:53:38

全高背景圖像中心寬度

問題描述

2 個解決方案

解決方案1 1 2013-07-26 16:17:16

解決方案2 0 2013-07-26 15:53:38

解決方案1
1 2013-07-26 16:17:16

解決方案2
0 2013-07-26 15:53:38