极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。

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

Issue

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

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

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

Author

回答者: hwb2017 (opens new window)

codepen demo (opens new window)

另外 aspect-ratio 也可以用于媒体查询中,参考 mdn (opens new window)

Last Updated: 11/27/2021, 6:11:48 PM