css+svg实现的定宽高比

2023年12月21日 256次阅读 来源: DeepKolos

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

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

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

codepen 演示了 两种使用方式:

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

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

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

    原文作者：DeepKolos
    原文地址: https://www.jianshu.com/p/90ffbc1b568b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞