如何防止重叠的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/

虽然这显然不适用于旧浏览器。

Answer 2

您看到的差距是由于您的图片试图垂直缩放而不是水平缩放。你可以通过翻转这种行为来解决这个问题：

#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:100% auto; /* notice the flip in the statement */
    -webkit-background-size:100% auto;
    -moz-background-size:100% auto;
    background-size:100% auto;
    -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;
}