Question

我尝试使用动态尺寸调整图片创建图块布局/网格框布局。想法是创建这个：http://i.imgur.com/ypmk6yR.jpg

但是盒子的大小需要根据浏览器的宽度或高度而改变。如果浏览器的宽度太短，那么每行的框也会变得更少。整行的框/图像应始终为页面的整个宽度。每个图像都是正方形。

有人创造了这个 http://codepen.io/davidkpiano/pen/EaxjBj

使用SASS，但我不知道如何使用SASS，但认为可以在没有SASS的情况下实现。

这就是我正在玩的东西，但我从来没有真正的工作

.img_left {
        float: left;
        padding-bottom: 500px;

}

.img_left img {
       width: 19.82vw;
       height: 19.82vw;
}

.img_work img {
        width: 19.82vw;
        height: 19.82vw;
        float: left;
 }

.img_left是第一张照片的div。我的问题有一个很好的解决方案吗？

Answer 1

您发布的codepen脚本非常简单。让我为你“解码”Sass，它可能就是你要找的东西：

* {
  box-sizing: border-box;
  position: relative;
}

.tile {
    float:left;
    width: 25%;
    padding: 25% 0 0 0;
    height: 0;
    overflow: hidden;
    transition: 0.3s all ease-in-out;
}
.tile > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
// Make sure rows are flush
.tile:nth-child(4n + 1) {
    clear: left;
}

// Small screens
@media (max-width: 768px) {
    .tile {
        width: 50%;
        padding: 50% 0 0 0;
    }
        .tile:nth-child(2n + 1) {
        clear: left;
    }
}

Answer 2

这是一个很好的SASS到CSS转换器，供您将来使用。至少在你对SASS变得更加熟悉之前。

http://sassmeister.com/

（CSS）带有动态大小调整图像的网格框布局

2 个答案: