css - 2列CSS底部定位

Question

我有一个 2 列布局，窗口大小的高度为 100%。在左侧，我有一张图像，我想占据位于包装器底部的窗口大小的 90%。在右侧，我在顶部有文字，我想占据 50% 的高度，在其下方有一个图像，占据 50% 的高度。我希望这两个图像都能响应窗口大小，但不会溢出到页面中的其他元素上。

这是我的 fiddle http://jsfiddle.net/jfarr07/7TctY/2/

HTML

<div class="background">
<div class="wrapper">
    <div class="leftside">
<div class="imgspacer"></div>
<div class="img"></div>
    </div>
    <div class="rightside">
        <div class="text">lakjsd;lfjas;ldjf;alsdjf;lasdlkfjas;ldjf;alsdjf;laksjdfl;kasjdf</div>
        <div class="rightimage"></div>
    </div>
</div>
</div>

CSS

body,html {
    height:100%;
    min-height:100%;
}

.background {
    background-size:cover;
    height:100%;
    min-height:100%;
    background-color:#333;
}

.wrapper {
    width:90%; 
    margin:0 auto;
    height:100%;
    min-height:100%;
    background-color:#fff;
}

.leftside {
    height:100%;
    min-height:100%;
    width:50%;
    float:left;
}

.imgspacer {
    height:10%; 
    background-color:#222;
    width:100%;
}

.img {
    height:90%;
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
    width:100%;
    background-repeat:no-repeat;
}

.rightside {
    background-color:#888;
    width:50%;
    height:100%;
    min-height:100%;
    float:right;
}

.text {
    width:100%;
    height:50%;
}

.rightimage {
    width:100%;
    height:50%;
    background-image:url(http://1.bp.blogspot.com/-CnXnB1TnnhE/UVc8czYpDUI/AAAAAAAAAP8/FXezUtrUeMU/s1600/Jared-allen.jpg);
    background-repeat:no-repeat;
}

Answer 1

我认为您所缺少的只是background-size: contain;。这是您要找的吗？

http://jsfiddle.net/7TctY/5/

编辑 - background-size: cover; 在某些情况下也可以工作，但在这种情况下，它会以一种不受欢迎的方式切断图像。