🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
[TOC] >[success] # css宽高1:1 css **aspect-ratio: 1/1;** 属性,可以实现容易 **1 比 1** 展示,或者可以按照自己想要的比例来设置 **1:1 效果**: ![](https://img.kancloud.cn/8a/de/8adeea1da819ef1a86708d437cbc1311_273x265.png) **1:2 效果**: ![](https://img.kancloud.cn/ea/31/ea3152d6c7c3e553fdd561fcd02ee958_585x604.png) **html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { background-color: red; aspect-ratio: 1/1; width: 200px; } </style> </head> <body> <div class="box"></div> </body> </html> ~~~