主页 / user-1626866

BobtheMagicMoose's questions

Martin Hope
BobtheMagicMoose
Asked: 2025-04-24 22:44:51 +0800 CST
  • 5

我想要一个缩略图图库，其中每张图片都保持其宽高比，并且图库的每一行都是全宽的。实现此目的的唯一方法似乎是：

  • 选择适合正常高度的行的图像数量
  • 增加行中图像的高度，直到行达到全宽。

是否可以仅通过 CSS 实现这种布局？我确信答案是“否”，但我只是想确认一下，因为我认为这是一个非常常见的问题（OneDrive 和 Google Photos 似乎都是通过手动计算来实现的）。我能想到的 CSS 方法包括使用弹性框（或网格）并留出额外空间，或者放大/裁剪图像以填充空间。

.root{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  border:2px solid black;
  & div{
    border: 1px solid blue;
    height: 100px;
  }
  
  & .portrait{
    aspect-ratio: 3 / 2;
    }
  & .landscape{
    aspect-ratio: 2 / 3;
  }
}

.desired{
  & div:nth-of-type(1), div:nth-of-type(2), div:nth-of-type(3){
    height: 134px;
  }
  & div:nth-of-type(4), div:nth-of-type(5), div:nth-of-type(6){
    height: 109px;
  }
}
  
<div>
Current:
  <div class="root">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>
Desired:
  <div class="root desired">
    <div class="portrait">s</div>
    <div class="landscape">w</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="portrait">s</div>
    <div class="landscape">w</div>
  </div>

css