波旁纯正方格

Question

尝试重写别人的模板(它工作得很好，并且是用原始的css3编写的--但非常混乱)。

大多数东西很容易翻译成波旁酒/整洁，但我坚持建立一个响应式的图像网格。

<section class="page-content">
  {% for post in site.posts reversed %}
    <div class="myevent" style="background-image:url({{post.cover}});">
  {% endfor %}
</section>

在外部容器中，我有一组动态生成的div (使用jekyll的试探)，在大屏幕上，我让每个div占据span-column(4)，我有媒体查询，根据宽度将列更改为8和4。

每个div都有一个作为背景的图像和一个标题文本标签。如果这是一个没有边框的固定屏幕(即每个div都是宽度的33%，那么添加33vw作为div高度就可以很简单了。我的问题是让div成为正方形。因为我事先不知道屏幕的宽度是多少，外容器的边垫是多少，有多少列，如果有排水沟(通常是，但不是单列) .....

.page-content {
  @include outer-container;
}

.myevent {
  @include span-columns(4);
  @include omega;
  //
  // has to be square - can't figure out how to calculate this
  //
}

.nth-element {
  // clear gutter every third
  @include omega(3n);
}

// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.

我不知道如何计算.myevent的实际宽度，并将这些div的高度设置为等于宽度

Answer 1

一种可能的解决方案(也是我可能使用的解决方案)是相对定位span-column对象，并在其中绝对定位内容。然后，我会添加如下内容：

.my-cool-column {
  position: relative;

  &::before {
    content: "";
    display: block
    padding-top: 100%;
  }
}

这将导致填充顶部等于父元素的宽度。这应该行得通。