以下为ChatGPT自动生成的解答,正确与否请自行判断。

BFE.devAI解答 - 前端面试问题
83. 如何用CSS实现固定比率的元素?

有以下几种实现方式:

  1. 使用 padding-top 或者 padding-bottom 对一个元素设置固定的百分比(如padding-top: 50%),然后再在该元素内部新建一个绝对定位的子元素,在子元素中设置 height: 100% 和 width: 100% 即可。

  2. 使用 viewport 单位来设置该元素的大小,如 height: 50vh,这样元素的高度就相当于视窗的一半,宽度可以根据比率计算。

  3. 使用 CSS3 中的 aspect-ratio 属性来直接设置元素的宽高比,如 aspect-ratio: 16 / 9,实现快速方便。

  4. 使用 JavaScript 动态计算元素的宽高比,然后设置元素的宽和高。