能否纯用CSS实现：调整行高维持宽高比的满幅图片画廊布局？

你的判断是对的——纯CSS没办法实现这种动态调整每行高度以铺满容器宽度、同时保持图片原生宽高比的画廊布局。

为什么CSS做不到？ #

CSS是声明式语言，它无法根据一行内所有元素的宽高比总和，反向计算出一个统一的行高，让整行刚好填满容器宽度：

• Flex布局：flex-wrap: wrap只会让元素在空间不足时换行，但无法让一行内的元素集体调整高度来填满剩余空间，flex-grow/flex-shrink会改变元素宽高比，破坏图片的原始比例。
• Grid布局：auto-fit/auto-fill可以自动适配列数，但同样无法动态计算行高，让不同宽高比的元素组合后刚好填满整行宽度。

近似CSS方案（无法完全满足需求） #

如果可以接受固定列数，或者允许少量间隙，可以用Grid做近似实现，但这不符合你要的"每行完全铺满"的要求：

.root {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px;
  width: 500px;
  border: 2px solid black;
}
.root div {
  border: 1px solid blue;
}
.root .portrait {
  aspect-ratio: 3/2;
}
.root .landscape {
  aspect-ratio: 2/3;
}

这个方案会让元素按固定最小宽度排列，但不同宽高比的元素会导致行内总宽度无法刚好匹配容器，要么留间隙，要么被拉伸变形。

正确实现：JavaScript计算 #

像OneDrive、Google Photos这类平台，都是用JS动态计算每行的目标高度，步骤如下：

1. 获取容器宽度和所有图片元素。
2. 按顺序将元素加入当前行，计算当前行所有元素的宽高比总和（宽度/高度，即aspect-ratio值）。
3. 当加入下一个元素会超出容器宽度时，停止并计算当前行的目标高度：容器宽度 / 行内元素宽高比总和。
4. 设置当前行所有元素的高度，然后开始下一行的计算。

结合你的示例，实现代码如下：

<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 (JS实现):
  <div class="root js-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>
</div>

<script>
function fitGalleryRows(containerSelector) {
  const container = document.querySelector(containerSelector);
  if (!container) return;
  const containerWidth = container.offsetWidth;
  const items = Array.from(container.children);
  let currentRowItems = [];
  let currentRowRatioSum = 0;

  items.forEach(item => {
    // 获取元素的aspect-ratio
    const style = getComputedStyle(item);
    const [w, h] = style.aspectRatio.split('/').map(Number);
    const ratio = w / h;
    
    // 模拟加入当前行后的总宽度，判断是否超出容器
    const testWidth = (currentRowRatioSum + ratio) * 100;
    if (testWidth > containerWidth && currentRowItems.length > 0) {
      // 计算当前行的目标高度
      const targetHeight = containerWidth / currentRowRatioSum;
      currentRowItems.forEach(el => el.style.height = `${targetHeight}px`);
      // 重置当前行
      currentRowItems = [];
      currentRowRatioSum = 0;
    }
    currentRowItems.push(item);
    currentRowRatioSum += ratio;
  });

  // 处理最后一行
  if (currentRowItems.length > 0) {
    const targetHeight = containerWidth / currentRowRatioSum;
    currentRowItems.forEach(el => el.style.height = `${targetHeight}px`);
  }
}

// 初始化和窗口 resize 时重新计算
fitGalleryRows('.js-desired');
window.addEventListener('resize', () => fitGalleryRows('.js-desired'));
</script>

<style>
.root{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 500px;
  border:2px solid black;
  margin: 10px 0;
  & div{
    border: 1px solid blue;
    height: 100px;
    box-sizing: border-box;
  }
  
  & .portrait{
    aspect-ratio: 3 / 2;
    }
  & .landscape{
    aspect-ratio: 2 / 3;
  }
}
</style>

这段JS会自动计算每行的高度，让整行刚好填满容器宽度，同时保持每个元素的原始宽高比，和你示例中的desired效果一致。

内容的提问来源于stack exchange，提问作者BobtheMagicMoose