高级前端css【Q534】CSS 如何实现固定长宽比的元素

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

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 547

Author 回答者: shfshanyue

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

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

Author 回答者: hwb2017

codepen demo

另外 aspect-ratio 也可以用于媒体查询中,参考 mdn