Question

我有这个纯css图像网格，我希望改进它，使其对浏览器窗口大小更具响应性。列和行当前是固定的，这意味着当您缩小浏览器窗口时，列将被压扁，在这种情况下理想的事情是切换到更少的列和更多行以最小化图像裁剪（因为图像最初是面向风景的。）

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%，否则会占据整个屏幕{{1 }}

这是一个非常简单的example尝试调整屏幕的大小，你会在一点上将图像从4连续折叠到2

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

1 个答案: