html - 我们如何创建图像网格，即 : Gallery

Question

这是一个不同类型的画廊。
这是一个 fiddle http://jsfiddle.net/HVMt9/
当页面加载时，您会看到标题和一张高度和宽度均为 100% 的大图像。我希望它滚动，图像结束的部分和橙色部分开始的部分，带有文本“组合”的部分，我希望它下面的 6 张图像和橙色部分适合页面，100%。< br/>这意味着从橙色部分开始到画廊的尽头必须是 100% 高度。
这里的问题是图库没有 100% 适合屏幕并且被缩短了或类似的东西。
我如何使图库图像的高度和宽度为 100%。
我用了HTML

<div class="PortfolioMain">
    <div class="HeadingBar"> <span class="HeadingBarText"> Portfolio </span> 
    </div>
    <div class="Portfolio">
        <img src="1.png" class="HomePortfolioLeft" />
        <img src="2.png" class="HomePortfolioCenter" />
        <img src="3.png" class="HomePortfolioRight" />
        <img src="4.png" class="HomePortfolioLeft" />
        <img src="5.png" class="HomePortfolioCenter" />
        <img src="6.png" class="HomePortfolioRight" />
    </div>
</div>

CSS

.HeadingBar {
    display:table;
    width:100%;
    height:8%;
    background-color:tomato;
}
.HeadingBarText {
    display:table-cell;
    vertical-align:middle;
    padding-left:30px;
    font-size:30px;
    font-family:Helvetica, Arial, sans-serif;
}
.PortfolioMain {
    width:100%;
    height:100%;
}
.Portfolio {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.HomePortfolioLeft {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioCenter {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}
.HomePortfolioRight {
    width:33.33%;
    height:33.33%;
    margin:0;
    padding:0;
    float:left;
}

Answer 1

我没有得到你期望的结果。但是，如果您想要显示覆盖整个浏览器区域的六张图片，请尝试更改 HomePortfolioLeft、HomePortfolioright、HomePortfoliocenter

  height:33.33%;

到

  height:100%;