灵活的图像缩放/拉伸，如音乐符号

Question

我有一个困难的布局问题，我无法找到解决方案。虽然主题似乎是音乐符号，但就我而言，它实际上是布局/ CSS问题。

有几排条形图（由垂直线分隔，见下面的图形＃1）。每个栏都是一个单独的svg文件。它们都具有相同的高度，总长度为100％。

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

图形＃2由音乐符号软件组成。最后一根柱子大于25％，前三根杆子挤压在一起。然而，所有酒吧保持高度和个人笔记保持其形式。

此外，还有一些边缘情况，超长条将下面的条推到下一行（见图3）。

那么为什么不在音乐符号软件中布局完整的行？

因为每个栏都是一个带有元信息的单独帖子，我想把这些帖子串在一起，而不是用音乐符号软件和附加到它的每个单独栏的元信息创建新帖子。

这可以在没有音乐符号软件但是使用个人（svg-）图像，css和jquery的情况下实现吗？

• 行长应始终为100％。
• 所有svgs具有相同的高度，但长度不同，具体取决于每个栏中的音符。
• 根据它们的内容，条形应该调整它们的宽度，并且 - 在边缘情况下 - 中断到下一行（见图3）。

我已经尝试过：

• 一排浮动的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>