前言：在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。
1. aspect-ratio 属性
使用 aspect-ratio 属性可以直接定义元素的宽高比，但是有兼容性问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="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" /> <meta name="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>
