css+svg实现的定宽高比

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

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

svg的viewBox属性能够实现固定的比例, 而后经过width: 100%或者height: 100%;来选择哪一边看成填充, 另外一边则按照比例撑开.

codepen 演示了 两种使用方式:

0. 宽度参考, 高度等比撑开
1. 高度参考, 宽度等比撑开
2. 经过JS修改比例(但高度参考时, 须要手动触发一次layout, 缘由未知)

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

codepen.io/deepkolos/p…