2列CSS底部定位

Question

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

这是我的小提琴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/

EDIT - background-size: cover;在某些情况下也可以工作，但在这种情况下，它以不希望的方式切断了图像。