使用HTML / CSS

Question

我尝试为我的投资组合制作响应/动态图像网格布局，例如Artstation在其首页上。我在这里：

http://jsfiddle.net/gprxzmtc/1/

所以我想要的功能是：

• 保持宽高比的无缝矩形瓷砖
• 1x1 tiles
• （heightXwidth）
• 2x2 tiles
• 1x2个瓷砖（理想情况下）
• 2x1个瓷砖（理想情况下）
• 2x3个瓷砖（理想情况下）
• 列数更改为适合容器宽度100％
• 瓷砖均匀刻度以适应色谱柱宽度100％
• 瓷砖重新排序以覆盖100％的图像区域

什么有效：

• 根据窗口大小调整列数
• 将图像宽度调整为列宽

什么不起作用（正确）：

• 图像无缝拼接
• 命令瓷砖占用最少的空间

现在我的容器最大宽度是960px，这使得1x1瓷砖160x160px，2x2瓷砖320x320px等。

HTML

<div class="container">
    <ul class="gallery">
        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeB' src='http://i.imgur.com/XuJoafB.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeA' src='http://i.imgur.com/OLT53f5.jpg' style='max-width:160px'></a></li>

        <li><a href=''><img id='sizeC' src='http://i.imgur.com/FnVs97u.jpg' style='max-width:320px'></a></li>

        <li><a href=''><img id='sizeD' src='http://i.imgur.com/LUMUsh4.jpg' style='max-width:320px'></a></li>

    </ul>
</div>

CSS

a {
    text-decoration: none;
}

ul {
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

body {
    background: #1c1c1c;
    width: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

.container {
    background: #101010;
    max-width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0;
}

.gallery {
    line-height: 0;
    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;


    }
    .gallery li {
        margin:  0;
        padding:  0;
        display: inline-block;
    }
    .gallery img {
        height: auto;
        margin:  0;
        padding:  0;
        width:  100%; 
    }
    #sizeA {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeB {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeC {
        margin-bottom: 0;
        margin-right: 0;
    }
    #sizeD {
        margin-bottom: 0;
        margin-right: 0;
    }
}

@media (max-width: 960px) {
    .gallery {
    -moz-column-count:    3;
    -webkit-column-count: 3;
    column-count:         3;
    }
}

@media (max-width: 640px) {
    .gallery {
    -moz-column-count:    2;
    -webkit-column-count: 2;
    column-count:         2;
    }
}

@media (max-width: 320px) {
    .gallery {
    -moz-column-count:    1;
    -webkit-column-count: 1;
    column-count:         1;
    }
}