Question

略微偏离整页拉伸背景的想法，我想在每个边缘上做一个带有图像的布局，它会拉伸自己以填充边缘宽度的100％。（因为，虽然整页图像可能适用于树叶或某些自然元素的图片，但是以类似方式调整大小的人的照片可能会导致他们与内容区域相交的切面。我宁愿让每一面调整大小独立。）

我尝试让它在jsfiddle中运行时玩了一点，但我想要一些更精确的东西。

我目前正在使用960网格（不流动或响应），并且很快将转向Bootstrap 3的响应式布局，因此如果要么提供自己的方法来处理这个问题，那也是有价值的。

.left-image, .right-image{position:relative; width:30%;height:100px;
background-image:url("http://www.craftonhills.edu/~/media/Images/SBCCD/CHC/Layout/book-green.png"); background-repeat: no-repeat;
background-size: 100% auto;
background-origin: content-box}

.left-image{border: 1px solid red; float:left}

.right-image{border: 1px solid green; float:right}

.content{width:200px; margin:0 auto; border: 1px solid black; height:100px;  position:relative}

http://jsfiddle.net/5jBAJ/

Answer 1

看看这个code

我认为这是您问题的解决方案

CSS

body{
    height: 100%;
    min-height: 500px;
}
.wrapper {
    display: table;
    width: 100%;
    height: 100%;
    min-height: 500px;    
}
.left-image, .right-image {
    position:relative;
    display: table-cell;
    height:100%;
    background-image:url("http://www.craftonhills.edu/~/media/Images/SBCCD/CHC/Layout/book-green.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-origin: content-box
}
.left-image {
    border: 1px solid red;
}
.right-image {
    border: 1px solid green;
}
.content {
    display: table-cell;    
    width:200px;
    margin:0 auto;
    border: 1px solid black;
    height:100%;
    position:relative
}

HTML

<div class="wrapper">
    <div class="left-image">left image</div>
    <div class="content">Content goes here.</div>    
    <div class="right-image">right image</div>
</div>

在流体网格的边缘显示100％宽的图像？

1 个答案: