是否可以在纯 CSS 中实现类似 Flickr 的对齐画廊？

Question

我一直在使用miromannino.github.io 作为几个页面的画廊布局，最近我一直在尝试找出是否可以在原始 CSS 中执行此操作，可能使用 flexbox。

问题在于不同的水平和垂直图片，它们应该始终填充 100% 的容器宽度。我得到的最接近的是：

.jgal {
  max-width: 90vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto;
  align-items: flex-start;
}

.jgalimg {
  display: block;
  align-self: flex-start;
  max-height: 40vh;
  max-width: 100vw;
  width: auto;
  height: auto;
}

在这样的布局上：

<div class="jgal">
    <a class="jgallink" href="url-to-img.jpg">
        <img class="jgalimg hor" src="url-to-thumb.jpg" width="640" height="480" />
    </a>
    <a class="jgallink" href="url-to-img-2.jpg">
        <img class="jgalimg ver" src="url-to-thumb-2.jpg" width="480" height="640" />
    </a>
    [ ... ]
</div>

我有大小和方向作为类。我试过使用

align-content: stretch;
align-items: stretch;

但随后将图像大小与 a 标签对齐变得很棘手。

那么，有什么想法吗？ :)

Answer 1

虽然这个问题已有一年多的历史，但我最近也在尝试解决同样的问题，我想出了以下完全响应式的纯 CSS 类似 Flickr 的正当画廊解决方案：

.jg {
  display: flex;
  flex-wrap: wrap;
}

.jg > a, .jg::after {
  --ratio: calc(var(--w) / var(--h));
  --row-height: 9rem;
  flex-basis: calc(var(--ratio) * var(--row-height));
}

.jg > a {
  margin: 0.25rem;
  flex-grow: calc(var(--ratio) * 100);
}

.jg::after {
  --w: 2;
  --h: 1;
  content: '';
  flex-grow: 1000000;
}

.jg > a > img {
  display: block;
  width: 100%;  
}

<div class="jg">

  <a href="#" style="--w: 200; --h: 300">
    <img src="http://via.placeholder.com/200x300">
  </a>
  <a href="#" style="--w: 300; --h: 200">
    <img src="http://via.placeholder.com/300x200">
  </a>
  <a href="#" style="--w: 500; --h: 400">
    <img src="http://via.placeholder.com/500x400">
  </a>
  <a href="#" style="--w: 300; --h: 300">
    <img src="http://via.placeholder.com/300x300">
  </a>
  <a href="#" style="--w: 300; --h: 400">
    <img src="http://via.placeholder.com/300x400">
  </a>
  <a href="#" style="--w: 400; --h: 300">
    <img src="http://via.placeholder.com/400x300">
  </a>
  <a href="#" style="--w: 200; --h: 300">
    <img src="http://via.placeholder.com/200x300">
  </a>
  <a href="#" style="--w: 400; --h: 300">
    <img src="http://via.placeholder.com/400x300">
  </a>
  <a href="#" style="--w: 300; --h: 500">
    <img src="http://via.placeholder.com/300x500">
  </a>

</div>

Answer 2

我不确定您使用 max-width: 90vw 的目标是什么，但您可以使用固定大小的缩略图来完成此操作。下面的 CSS 将缩放图像以填充容器，将其垂直和水平居中裁剪。

.jgal {
  /* set font-size to 0 to avoid the whitespace between HTML elements causing spaces between the photos */
  font-size: 0;
}
a.jgallink {
  /* set desired image size */
  width: 320px;
  height: 240px;

  /* set space between photos */
  margin-right: 1px;

  position: relative;
  overflow: hidden;
  display: inline-block;
}

img.jgalimg {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

img.jgalimg.ver {
  width: 100%;
  height: auto;
}

open in codepen

本文改编自 this blog post，该技术从 Wordpress 媒体库中获得。

Answer 3

这是我通过flexbox 实现的。

.jgal{
  width: 100%;
  display: flex;
}

.jgal a{
  border-right: 3px solid #fff;
}

.jgal img{
  width:100%;
  height: 100%;
  object-fit: cover;
}

https://jsfiddle.net/1wrn8k4v/2/