Question

我有一个占据视口整个高度的图像。图像高度应跨越整个视口高度（100％），以便它适合于从中查看的屏幕（此处已完成），并且宽度应与高度成比例。正如您在我的页面（http://lamininbeauty.co.za）中看到的那样，页面两侧有空格。我希望图像水平居中。以下是我的代码：

CSS：

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    margin: auto;
}

img.bg {
        /* Set rules to fill background */
        max-height: 100%;

        /* Set up proportionate scaling */
        height: auto;

        /* Set up positioning */
        position: fixed;

}

HTML：

<body>
<div id="main">
    <img class="bg" src="images/massage2.jpg" border="none" />  
</div>
</body>

注意：我不希望图像失去纵横比，它应该始终垂直适合100％，没有图像被截断，也没有垂直滚动。 Horizntal居中。我试图远离background-size属性，因为IE8及更低版本不支持它。

Answer 1

只需将left:0;right:0;margin:0 auto;添加到img.bg（example）：

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    margin: auto;
}

img.bg {
    /* Set rules to fill background */
    max-height: 100%;

    /* Set up proportionate scaling */
    height: auto;

    /* Set up positioning */
    position: fixed;

    /* Align horizontally */
    left:0;
    right:0;
    margin:0 auto;   
}

替代解决方案

如果您希望图像永远不会被切断（水平或垂直），并始终居中，请尝试使用此代码（来自https://stackoverflow.com/a/6284195/526741）：

<img class="absoluteCenter" src="PATHTOIMAGE">

/* Don't Change - Positioning */
.absoluteCenter {
 margin:auto;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 right:0;
}

/* Sizing */
img.absoluteCenter {
 max-height:100%;
 max-width:100%;
}

Answer 2

将img放入div并设置text-align: center。使div固定，而不是img。要展开较小的图片，请使用height: 100%代替max-height。

div.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
div.bg img {
    height: 100%;
}

工作演示： http://jsfiddle.net/Mt7ce/

Answer 3

我假设您的main将包含其他项目，因此使用第二个包装div：

<div id="main">
    <div class="bg">
        <img src="http://lamininbeauty.co.za/images/massage2.jpg" border="none" />
        <span>Some text.</br>And Some More.</span>
    </div>  
</div>

你可以设置这个css：

body {
    overflow: hidden;
}

.bg{
    width: 100%;
    height: 100%;
    text-align: center;
    position: fixed;
}

.bg img {
    max-height: 100%;
    height: auto;
}

.bg span {
    display: block;
    position: absolute;
    width: 100%;
    font-size: 20px; /* sizing this to the dynamic height of img will be a challenge */
    top: 20%;
}

得到你想要的东西（现在有文字）as shown here。如上所述，添加文本，您将面临的最大挑战是调整文本大小。您可能需要使用javascript或@media集来更改height的文字大小。就个人而言，除非文本是至关重要的（我认为这是背景，但事实并非如此），我会将文本放在图像中，使其与大小成比例并保持相对于图像的正确。

Answer 4

我不知道你是否可以设置主高，但如果可以设置高度那么

body{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#main{
    text-align: center;
    height: 300px;
}

img.bg {
        /* Set rules to fill background */
        max-height: 100%;

        /* Set up proportionate scaling */
        height: auto;       
}

我只在FF上测试过这个。对于main的高度，您始终可以使用jquery将其设置为视口。如果不设置那个高度，我就无法想出你想要的东西。

将图像水平放置在中心位置，使高度为视口的100％

4 个答案:

替代解决方案