5

我有一张占据视口整个高度的图像。图像高度应跨越整个视口高度（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%，没有图像被切断，也没有垂直滚动。水平居中。我尽量远离 background-size 属性，因为 IE8 及更低版本不支持它。

4

4 回答 4

10

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

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%;
}
于 2012-07-16T21:04:21.437 回答
1

将 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/

于 2012-07-16T21:02:14.137 回答
1

我假设您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%;
}

并得到你想要的（现在有文字），如图所示。如前所述，添加文本时，您将面临的最大挑战是调整文本的大小。您可能需要使用 javascript 或一@media组来更改文本大小height。就个人而言，除非文本很重要（如果这是背景，我会认为它不是），我会将文本放在图像中，以便它随大小缩放并与图像保持正确的关系。

于 2012-07-16T21:02:21.807 回答
0

好吧我不知道你是否可以设置主要高度，但如果你可以设置高度然后

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 将其设置为视口。如果不设置那个高度，我无法想出你想要的东西。

于 2012-07-16T21:00:35.667 回答