Question

我正在尝试制作一个填充iPad屏幕的页面，并且iPhone上有2个黑色边缘，因为宽高比不同。

背景图片需要保持固定的形状，而不是拉伸。

我已经成功制作了div背景，正确的尺寸和形状，但我无法居中。有人可以帮忙吗？ 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>&nbsp;</h1>
    <!-- end #mainContent --></div>
    </div>
</body>

Answer 1

background-size:cover;

编辑

background-size:contain; background-position:center;backround-color:#E2AA7B;

Answer 2

将此添加到#container css

background-position: center center;

Answer 3

我已在Google Chrome上打开您的页面并打开了元素检查器。在你的＆＃34;容器＆＃34; div，放置＆＃34;背景位置：中心;＆＃34;使它水平粘到中心。

试图使div背景图像100％高度的窗口和div居中

3 个答案: