水平放置图像中心并使视口高度达到100％ [英] Positioning image horizontally center and make height 100% of viewport
问题描述
我有一张图像占据了视口的整个高度。图像高度应该跨越整个视口高度（100％），以便它适合从其中查看的屏幕（此处已经完成），并且宽度应该与高度成正比。正如您在我的页面中看到的那样（ http://lamininbeauty.co.za ），该页面上的空间两侧。我想让图像水平居中。以下是我的代码：
CSS：
body {
margin：0px;
padding：0px;
overflow：hidden;
}
#main {
margin：auto;
}
img.bg {
/ *设置规则以填充背景* /
最大高度：100％;
/ *设置比例缩放* /
height：auto;
/ *设置定位* /
位置：固定;
$ b
HTML：
< body>
< div id =main>
< img class =bgsrc =images / massage2.jpgborder =none/>
< / div>
< / body>
注意：我不希望图像丢失宽高比，它应该始终适合垂直100％ ，没有图像被切断，也没有垂直滚动。水平居中。我尝试远离background-size属性，因为IE8和更低版本不支持它。 只需添加 left：0; right：0; margin：0 auto; to img.bg （
body {
margin：0px;
padding：0px;
overflow：hidden;
}
#main {
margin：auto;
}
img.bg {
/ *设置规则以填充背景* /
最大高度：100％;
/ *设置比例缩放* /
height：auto;
/ *设置定位* /
位置：固定;
/ *水平对齐* /
left：0;
right：0;
margin：0 auto;
$ / code>
另类解决方案
如果您希望图像永远不会被切断（横向或纵向），并始终居中，请尝试使用此代码（从 https：/
< img class =absoluteCentersrc =http://stackoverflow.com/a/6284195/526741 ）： 映像路径 >
/ *不要更改 - 定位* /
.absoluteCenter {
保证金：自动;
位置：固定;
top：0;
bottom：0;
剩下：0;
right：0;
}
/ *尺码* /
img.absoluteCenter {
最大高度：100％;
最大宽度：100％;
}
I have a an image taking up the entire height of the viewport. The image height should span the entire viewport height (100%) so that it will fit to the screen it is viewed from (already accomplished here) and the width should be relatively proportional to the height. As you can see in my page (http://lamininbeauty.co.za), the page has space on the sides. I want the image to center horizontally. Below is my code:
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>
Note: I do not want the image to lose aspect ratio and it should always fit in vertically 100%, none of the image being cut off and no vertical scrolling. Horizntal centering. I try to stay away from the background-size property since IE8 and lower does not support it.
解决方案 Simply add left:0;right:0;margin:0 auto; to 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;
}
Alternative Solution
If you want the image to never be cut off (horizontally or vertically), and always centered, try this code instead (from 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%;
}
这篇关于水平放置图像中心并使视口高度达到100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
