(CSS) 具有动态大小图像的网格框布局答案

【问题标题】：(CSS) Grid Box layout with dynamic sizing images(CSS) 具有动态大小图像的网格框布局
【发布时间】：2014-11-13 16:25:04
【问题描述】：

我正在尝试使用动态调整大小的图像创建平铺布局/网格框布局。想法是创建这个：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。我的问题有什么好的解决方案吗？

【问题讨论】：

您可以点击codepen中的眼睛图标来切换编译视图：i.imgur.com/XQek16y.jpg

标签： html css tile box

【解决方案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;
    }
}

【讨论】：

谢谢！那么为什么 sass 被如此普遍地使用呢？编码的改进有那么大吗？还是它实际上带来了新功能。我不知道。
@user3648229 我不是这个答案的 OP，但我想就此发表我的看法。使用 SASS/LESS 彻底改变并改进了我的 CSS 开发。它既使开发速度更快，又增加了变量和函数等功能。在这一点上，我无法想象没有它的 Web 开发。
实际上，是否使用 SASS 是您的选择。 SASS 有更多让人眼前一亮的功能。嵌套规则就是其中之一。确保检查Compass CSS 创作框架。你会在那里得到一些信息。如果我的回答对你有好处，别忘了接受。谢谢。

【解决方案2】：

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

http://sassmeister.com/

【讨论】：