css - 像乐谱一样灵活的图像缩放/拉伸(stretch)

Question

我有一个很难找到解决方案的布局问题。虽然主题似乎是音乐符号，但在我的情况下，它实际上是布局/css 问题。

有几行条形图(由垂直线分隔，请参见下图 #1)。每个栏都是一个单独的 svg 文件。它们都具有相同的高度，加起来的长度为 100%。

这对于相同长度的条很容易，但对于不同尺寸的条则变得非常棘手。

图形 #2 是用乐谱软件创作的。最后一个条大于 25%，前三个条被压在一起。然而，所有条形图都保持其高度，单个音符保持其形状。

此外，在某些极端情况下，超长条将后面的条推到下一行(见图 #3)。

那么为什么不在乐谱软件中布局完整的行呢？

因为每个小节都是一个带有元信息的单独帖子，我想将这些帖子串在一起，而不是创建新帖子，其中包含在乐谱软件中完成的完整行和附加到它的每个单独小节的元信息。

这是否可以在没有音乐符号软件但使用单独的 (svg-) 图像、css 和可能的 jquery 的情况下实现？

• 行长应始终为 100%。
• 所有 svg 的高度相同，但长度不同，具体取决于每个小节中的音符。
• 根据它们的内容，条形应该调整它们的宽度——在极端情况下——中断到下一行(见图 3)。

我已经试过了:

• 一行 float 的 4 个 div，宽度为 25%。对于相同长度的钢筋来说，这是一个很好的解决方案。但是具有不同宽度/纵横比的图像会被挤压并且看起来非常扭曲。

• 显示为表格单元格的一行 div所以每个 div 都有一个灵活的宽度。但根据图像/条形大小，表格行会超过 100%。

编辑:正如@yinken 所建议的，我实现了一个 flexbox 解决方案。它在总体布局/容器流方面非常有效。但是缩放图像导致外观不均匀的问题仍然存在。

我添加了 .bars img { min-width: 100%; } 以避免图像之间的间隙。

Answer 1

这听起来像是 Flexbox 的一个很好的用例。在下面的代码中，每个音乐小节设置为至少占每行宽度的 25%，因此在任何给定时间每行最多有 4 个小节。随后的每个条形图都会自动换行，

如果一个条的内容变得比它大，它会相应地变大。如果一行中只有一个栏，它的大小将自动填充其宽度的 100%。

  .sheet-music {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .bar {
    height:80px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    margin-bottom:20px;
  }
  .bar:nth-of-type(even) {
    background: #ccc;
  }
  .bar:nth-of-type(odd) {
    background: #eee;
  }

<div class="sheet-music">
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
  </div>