CSS之宽高比例布局的方法示例

适用场景：IE10+ 、现代浏览器

优点: DOM节点少、可响应式

<div class="aspect-ratio"></div>

1、固定值

值的计算可参考文章头部表格

/* vw */
.aspect-ratio{ width: 100vw; height: 50vw; }
/*vh */
.aspect-ratio{ width: 100vh; height: 50vh; }

2、calc()

利用 calc() 可以动态计算相应值，我们只需要知晓相应比值与高宽中一个值，该方式也可以延用到padding适配中。

/* vw */
.aspect-ratio{ width: 100vw; height: calc(100vw * 1 / 2); }
/*vh */
.aspect-ratio{ width: 100vh; height: calc(100vw * 1 / 2); }

以上两种方法四种实现方式可根据不同场景选用不同的方式。不过有部分情况下采用padding与伪元素的方式相对更佳。

结合居中

在些基础上，我们可能会涉及相关的对宽高比元素进行居中排版，相关细节可参考我上篇文章CSS之居中布局

参考

Aspect Ratio Boxes

Maintain the aspect ratio of a div with CSS

Padding

The-padding