html - 如何防止叠加的 div 在某些分辨率下产生间隙？ (谷歌时代精神)

Question

这是我的网站:http://designobvio.us/portfolio/body.html

这是我有抱负的网站:http://www.googlezeitgeist.com/en/top-searches/battlefield_three

我已经非常接近布局了；但是，当您在垂直方向上过度缩小浏览器时，会产生间隙。

此外，我什至无法调试比我的 (1280x800) 更好的分辨率，我敢肯定其他东西会在另一个方向上中断。

更新:会不会是照片的一般尺寸？ Zeitgeist 使用 800x800 (sq) 图片；而我使用矩形？

问题也可能是我的 HTML 结构中的错误？ (这对我来说是一个非常艰难的布局)

<section class="bodySection">
  <div id="body-wrapper-left" class="class="">
    <div id="me"></div>
    <div id="pattern"></div>
  </div>
  <div id="body-wrapper-right"> </div>
  <div class="clearfix"></div>
</section>
<!--end of bodySection--> 

或我的 CSS:

html, body, #body-wrapper, .bodySection {
    height: 100%;
}
#body-wrapper-left {
    position: relative;
    width:35%;
    height: 100%;
}
#body-wrapper-left #me {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('http://designobvio.us/portfolio/img/Me.jpg') repeat-y;
    z-index: 1;
    -o-background-size:auto 100%;
    -webkit-background-size:auto 100%;
    -moz-background-size:auto 100%;
    background-size:auto 100%;
    -webkit-transition: all 0.20s ease-out;
    -moz-transition: all 0.20s ease-out;
    -o-transition: all 0.20s ease-out;
    transition: all 0.20s ease-out;
}
#body-wrapper-left #pattern {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url('http://designobvio.us/portfolio/img/sliderBG.png') repeat;
    z-index: 2;
}
#body-wrapper-right {
    position: absolute;
    height: 100%;
    right:0;
    top:0;
    min-width:65%;
    width:65%;
    background:#fff;
    z-index:9;
}

据我所知，它看起来像是某个地方设置的最小高度//最小宽度(可能是另一个方向的最大值)值。任何人都知道在哪里选择什么，以便我可以统一宽度和高度，这样效果更像 Google Zeitgeist？

Answer 1

您可以使用 CSS3 的背景覆盖选项。

#element {
background: url(http://designobvio.us/portfolio/img/Me.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 50%;
height: 100%;
position: absolute;
}

示例:http://jsfiddle.net/B7W2K/20/

虽然显然这在旧版浏览器中不起作用。