在浏览器调整大小时重新排列图像网格？

Question

我有一个纯粹的 css 图像网格，我希望对其进行改进，使其对浏览器 window 大小的响应速度更快。列和行目前是固定的，这意味着当您缩小浏览器 window 时，列将被压扁，在这种情况下，理想的做法是切换到更少的列和更多的行，以最大限度地减少图像裁剪（因为图像最初是横向的）。

HTML结构：

<div class='padding'>
    <div class='column'>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
        </div>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
        </div>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
        </div>
    </div>
    <div class='column'>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
        </div>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
        </div>
        <div class='row'>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
            </div>
            <div class='thumb'>
                <div class='image' style='background-image:url(URL)'></div>
        </div>
    </div>
</div>

CSS:

.padding {
    position:absolute;
    top:8px;
    right:8px;
    bottom:8px;
    left:8px;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
}

.column {
    position:relative;
    float:left;
    width:50%;
    height:100%;
}

.row {
    position:relative;
    display:flex;
    display:-webkit-flex;
    display:-o-flex;
    display:-moz-flex;
    display:-ms-flexbox;
    width:100%;
    height:calc(100%/3);
}

.thumb {
    position:relative;
    width:100%;
    margin-top:8px;
    margin-right:8px;
    margin-left:8px;
    margin-bottom:8px;
    overflow:hidden;
}

.image {
    position:absolute;
    top:0px;
    right:0px;
    bottom:0px;
    left:0px;
    background-size:cover;
    background-position:center;
}

这是一个 jsfiddle：https://jsfiddle.net/xybosmzm/

我不确定从哪里开始，但我想我需要使用一些 javascript/jquery 才能做到这一点？

Answer 1

你需要的是 media queries 你可以阅读更多关于它的信息 here，添加后看起来像这样：

.column {
    width:100%
}

@media screen and (min-width:470px) {
   .column {
     width:50%;
    }
}

@media 将使得当屏幕至少 470px 宽时列将是屏幕的 50% 宽度，否则它将占据整个屏幕 width:100%.

这是一个非常简单的方法example尝试调整屏幕大小，您会发现图像会在某一时刻从连续 4 张折叠为 2 张

在浏览器调整大小时重新排列图像网格？

Rearrange image grid upon browser resize?

html

css

jquery

image-gallery

responsive-design