css+svg实现的定宽高比

最近看到一篇关于css实现固定宽高比的思路, 最近也接触了一下svg的viewBox的属性, 想到了这是很好的撑开物.

原来相同, 只是撑开的方式不同, 使用svg而不是padding

svg的viewBox属性可以实现固定的比例, 然后通过width: 100%或者height: 100%;来选择哪一边当作填充, 另一边则按照比例撑开.

codepen 演示了 两种使用方式:

1. 宽度参考, 高度等比撑开
2. 高度参考, 宽度等比撑开
3. 通过JS修改比例(但高度参考时, 需要手动触发一次layout, 原因未知)

这里的参考支持值由父级节点提供的.

https://codepen.io/deepkolos/pen/NmJNWv