CSS 如何实现固定长宽比的元素

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 547 (opens in a new tab)

Author 回答者: shfshanyue (opens in a new tab)

过去的解决方案是使用 padding。一个元素的 padding 如若设置为百分比，则代表的是以父元素宽度为基准，根据这个原理，可设置长宽比。但实际上意义有限，毕竟你把 padding 给占了，content 无任何区域。

现代化的解决方案是使用长宽比的 CSS 属性: aspect-ratio

Author 回答者: hwb2017 (opens in a new tab)

另外 aspect-ratio 也可以用于媒体查询中，参考 mdn (opens in a new tab)