最近看到一篇关于css实现固定宽高比的思路, 最近也接触了一下svg的viewBox的属性, 想到了这是很好的撑开物.
原来相同, 只是撑开的方式不同, 使用svg而不是padding
svg的viewBox属性可以实现固定的比例, 然后通过width: 100%或者height: 100%;来选择哪一边当作填充, 另一边则按照比例撑开.
codepen 演示了 两种使用方式:
- 宽度参考, 高度等比撑开
- 高度参考, 宽度等比撑开
- 通过JS修改比例(但高度参考时, 需要手动触发一次layout, 原因未知)
这里的参考支持值由父级节点提供的.
