技术栈

css让元素保持等比例宽高

Qayrup2023-09-06 22:46

使用新属性

aspect-ratio: 16/9;

代码示例

html 复制代码
<style>
    div {
      width: 60%;
      /* 等比例宽高 */
      aspect-ratio: 16/9;
      background-color: red;
      margin: auto;
    }
  </style>
</head>

<body>
  <div></div>
</body>

示例

aspect-ratio兼容性

上一篇:VR全景对行业发展有什么帮助?VR全景制作需要注意什么?
下一篇:vr智慧党建主题展厅赋予企业数字化内涵
相关推荐
CF14年老兵
13 分钟前
✅ Next.js 渲染速查表
前端·react.js·next.js
司宸
22 分钟前
学习笔记八 —— 虚拟DOM diff算法 fiber原理
前端
阳树阳树
22 分钟前
JSON.parse 与 JSON.stringify 可能引发的问题
前端
让辣条自由翱翔
27 分钟前
总结一下Vue的组件通信
前端
dyb
27 分钟前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
前端的日常
28 分钟前
Vite 如何处理静态资源?
前端
前端的日常
29 分钟前
如何在 Vite 中配置路由?
前端
兮漫天
30 分钟前
bun + vite7 的结合,孕育的 Robot Admin 靓仔出道(一)
前端
PineappleCoder
30 分钟前
JS 作用域链拆解:变量查找的 “俄罗斯套娃” 规则
前端·javascript·面试
兮漫天
31 分钟前
bun + vite7 的结合,孕育的 Robot Admin 靓仔出道(二)
前端
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4,国内已可免费使用!(附教程)03MSPM0G3507——读取引脚的高低电平方法(数字信号循迹模块)04腾讯还是太全面了,限时免费!超全CodeBuddy IDE保姆级教程!(附案例)05Coze 开源了,送上保姆级私有化部署方案【建议收藏】06KGG转MP3工具|非KGM文件|解密音频07VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)08扣子开源本地部署教程 丨Coze智能体小白喂饭级指南092025年电子设计大赛G题《电路模型探究装置》各小问数学推导及个人思路102025电赛e题:openmv识别过程丢失矩形