css+svg實現的定寬高比

最近看到一篇關於css實現固定寬高比的思路, 最近也接觸了一下svg的viewBox的屬性, 想到了這是很好的撐開物.

原來相同, 只是撐開的方式不一樣, 使用svg而不是padding

svg的viewBox屬性能夠實現固定的比例, 而後經過width: 100%或者height: 100%;來選擇哪一邊看成填充, 另外一邊則按照比例撐開.

codepen 演示了 兩種使用方式:

0. 寬度參考, 高度等比撐開
1. 高度參考, 寬度等比撐開
2. 經過JS修改比例(但高度參考時, 須要手動觸發一次layout, 緣由未知)

這裏的參考支持值由父級節點提供的.

codepen.io/deepkolos/p…