0

我有一个 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;
}
4

1 回答 1

0

我想你所缺少的只是background-size: contain;. 这是你要找的吗？

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

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

于 2013-06-03T18:18:30.707 回答