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

我有一个占据整个视口高度的图像。图像高度应跨越整个视口高度（100%），以便适合从中查看图像的屏幕（此处已完成），并且宽度应与高度相对成比例。正如您在my page（）中所看到的，页面的两侧都有空间。我希望图像水平居中。下面是我的代码：

CSS:

HTML:

---

注意：我不希望图像丢失纵横比，它应该始终垂直100%，没有图像被切断，也没有垂直滚动。水平定心。我尽量远离背景大小属性，因为IE8和更低版本不支持它。

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

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将其设置为视口。如果不设置该高度，我就无法得出您想要的结果。

将img放在div中，然后设置

文本对齐：居中。使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%;
}​

工作演示：
我假设您的
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>

然后得到你想要的（现在就发短信）。如前所述，添加文本时，您将面临的最大挑战是调整文本大小。您可能需要使用javascript或
@media
设置来更改高度为
的文本大小。就我个人而言，除非文本很重要（如果这是背景，我会认为不是），否则我会将文本放在图像中，使其与大小成比例，并保持与图像的相对位置。
只需添加
left:0；右：0；保证金：0自动至
img.bg
（）：

正文{
边际：0px；
填充：0px；
溢出：隐藏；
}
#主要{
保证金：自动；
}
img.bg{
/*设置填充背景的规则*/
最大高度：100%；
/*设置比例缩放*/
高度：自动；
/*设置定位*/
位置：固定；
/*水平对齐*/
左：0；
右：0；
保证金：0自动；
}

替代解决方案
如果您希望图像永远不会被切断（水平或垂直），并且始终居中，请尝试以下代码（从）：





记住，没有固定的宽度，所以位置：绝对；左：50%；最高：50%；左边距：-250px；利润上限：-250px；不起作用（使用示例尺寸）好的，谢谢。我会看看是否还有什么可以做的，最后我会使用jquery…但我现在不想修改宽度。谢谢你的帮助，否则我能做的就是，使用媒体查询并设置每个代表性屏幕大小的高度和宽度…@DextrousDave，没问题。请看我从另一个答案中添加的附加解决方案--我认为这可能是一个更好的解决方案，可以满足您的需求：）（请不要忘记标记此答案并接受此答案。）正如我在下面问Scot的那样，如果我想在该图像上添加文本，我会怎么做？您的替代答案很好！太好了，我把这张票和你链接的那张票投了上去。@DextrousDave，这就是事情开始变得棘手的地方。
img
元素处理大小的方式与普通元素有很大的不同，这就允许这种绝对中心技巧首先发挥作用。使用不同的元素（在当前浏览器中）实现类似效果需要包装器元素（或JavaScript）上的静态宽度和高度。为此，只需将
img.absoluteCenter
更改为正确的元素，并使用
height
和
width
（可以是百分比）。给你。谢谢你，伙计！这很有效。还有一个问题，如果我想在不影响当前布局的情况下在该图像上添加文本（比如span标记），该怎么办？@DextrousDave--添加了文本覆盖，但请在我的答案底部查看我的注释。是的，谢谢。我也认为把文字放在图片里是最安全的。这同样有效。如果我想在图像顶部添加文本，我将如何操作？将包含文本的div放在包装div内，并将其绝对定位。@DextrousDave-下面是一个将文本放在图像顶部的示例：。跨度和div一样有效：谢谢！非常好的代码。我本来会给你分数的，但是上面的bfrohs首先帮助了我，他给了我多个答案。但再次感谢你
div.bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
}
div.bg img {
    height: 100%;
}​

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

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