前端 CSS 经典：保持元素宽高比
前言：在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。
1. aspect-ratio 属性
使用 aspect-ratio 属性可以直接定义元素的宽高比，但是有兼容性问题
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}</style></head><body><div class="item"></div><script></script></body>
</html>2. 使用包含块
再套一层元素，使用 padding-top 撑开包含块，再嵌套一层元素填写类型，绝对定位上包含快。
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>.item {background: #000;width: 50%;margin: 0 auto;aspect-ratio: 4 / 3;}.inner {width: 100%;padding-top: 75%;height: 0;position: relative;}.container {position: absolute;width: 100%;height: 100%;}</style></head><body><div class="item"><div class="inner"><div class="container">这是内容</div></div></div><script></script></body>
</html>