我有一个占据视口整个高度的图像.图像高度应跨越整个视口高度(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：
注意：我不希望图像丢失宽高比,它应该始终垂直适合100％,没有图像被截断,也没有垂直滚动. Horizntal居中.我试图远离background-size属性,因为IE8及更低版本不支持它.
最佳答案
只需添加左：0;右：0;边距：0自动;到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开始)：
/* 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%;
}
