居中宽度的全高背景图像

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

我尝试了不同的方法（使用16：9视口作为示例4：3图像）。
首先，background-size都与contain并用cover施加到<body>标签：

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

另外使用background-size: auto 100%;产生作为相同的效果3210

这是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; 
}

来源

2013-07-26 Kropot

您的''不覆盖整个视口吗？ –

尝试'包含'并添加'body，html {min-height：100％;}' – Pete

使用@Pete的建议它确实有效:) – Kropot

更新你的CSS：

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

来源

2013-07-26 15:53:38

由于@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-26 16:17:16 Kropot

居中宽度的全高背景图像

回答

相关问题