尝试在 for 循环中用图片填充页面

Question

我有一个用图片填充页面的循环，但它们是垂直填充的。

    {% for i in range(amount) %}
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
       <div class="contents-block">
        <div class="image"><img src="/static/assets/img/uploaded/coro.png" />
        </div>
       </div>
      </div>
    {% endfor %}
   </div>

如何让图片在网格中填满整个页面？

Answer 1

您的图片排在一列中，因为您的所有 <img> 标签都在父列下。而右侧部分是空的，单张图片没有覆盖整个宽度的原因是图片的大小。

要回答关于如何制作覆盖整个宽度的图像网格的问题，我的想法是将所有图像包含在 div 中并使用 n 列

<div class="images">
    {% for i in range(amount) %}
        <img src="/static/assets/img/uploaded/coro.png" />
    {% endfor %}
</div>

而 CSS 将是

.images {
  /* Prevent vertical gaps */
  line-height: 0;
  column-count: 5; /* this depends on size, no.of images and viewport(for making it responsive) */
  column-gap: 0px;  
}

.images img {
  width: 100% !important;
  height: auto !important;
  padding: 3px;
}

尝试在 for 循环中用图片填充页面

Trying to fill a page with pictures in a for loop

html

python

layout

flask