尝试使div背景图片的窗口高度为100％，并且div居中
[英]Trying to make a div background image 100% height of window and div centered
问题描述
I'm trying to make a page that fills the screen on an iPad and has 2 black edges on an iPhone as the aspect ratio is different. 
我正在尝试制作一个页面，该页面填充iPad上的屏幕，并在iPhone上具有2个黑边，因为纵横比不同。
The background image needs to stay fixed shape, not stretched. 背景图像需要保持固定的形状，而不是拉伸的。
I've managed to make the div background, the right size and shape, but I can't centre it. 我设法使div背景，正确的大小和形状正确，但是我无法将其居中。 Can anyone help? 有人可以帮忙吗？ http://www.simonpetermedia.com/Aboutpage/about.html http://www.simonpetermedia.com/Aboutpage/about.html
html{
height:100%;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
height: 100%;
background: #000000;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtr #container {
position:fixed !important;
top:0;
right:0;
left:0;
bottom:0;
margin-right: auto;
margin-left: auto;
height: 100%;
background-image: url("aboutbg.jpg");
background-size: auto 100%;
background-repeat: no-repeat;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
min-height: 100%;
}
.oneColElsCtr #mainContent {
padding: 0px;
}
-->
</style></head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<h1> </h1>
<!-- end #mainContent --></div>
</div>
</body>
3 个解决方案
解决方案1
0 已采纳 2014-08-28 12:42:08
background-size:cover;
编辑为
background-size:contain; background-position:center;backround-color:#E2AA7B;
解决方案2
0 2014-08-28 12:44:38
将此添加到#container css
background-position: center center;
解决方案3
0 2014-08-28 13:09:24
I have opened your page on Google Chrome and have opened the element inspector. 我已经在Google Chrome浏览器上打开了您的页面，并打开了元素检查器。 At your "container" div, put a "background-position: center;" 在您的“容器” div处，放置一个“ background-position：center;”。 to make it stick horizontally to center. 使它水平粘贴到中心。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.