使用 SVG 的纵横比

我非常喜欢 Noam Rosenthal 的这个小技巧

<style>
.aspectRatioSizer {
  display: grid;
}
.aspectRatioSizer > * {
  grid-area: 1 / 1 / 2 / 2;
}
</style>

<div class="aspectRatioSizer">
  <svg viewBox="0 0 7 2"></svg>
  <div>
    Content goes here
  </div>
</div>

那里有两件事正在发生

1. 一旦你给 <svg> 一个 viewBox，它就会全宽，但只有 viewBox 值中隐含的纵横比那么高。viewBox 值本质上是 SVG 内部坐标系的“顶部、左侧、宽度、高度”，但它在没有自身高度的情况下，会对元素本身的大小产生副作用。这就是用于将父元素也“推入”纵横比。如果父元素必须伸展（例如，内容超过了适合的范围），它仍然会伸展，这是很好的。
2. CSS Grid 用于将两个元素彼此堆叠，并且源代码顺序使内容位于顶部。

直接链接 →