css让元素保持等比例宽高

使用新属性

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兼容性

相关推荐
英俊潇洒美少年8 分钟前
css中专门用来提升渲染性能、减少重排重绘的属性
前端·css
天若有情67321 分钟前
前端HTML精讲01:别再乱 div 一把抓,吃透语义化标签才是进阶第一步
前端·html
Highcharts.js22 分钟前
React 开发者的图表库生态:Highcharts React
前端·react.js·前端框架
阿部多瑞 ABU22 分钟前
文明文化悖论
前端·人工智能·ai写作
钛态41 分钟前
Flutter 三方库 react 泛前端核心范式框架鸿蒙原生层生态级双向超能适配:跨时空重塑响应式单向数据流拓扑与高度精密生命周期树引擎解耦视图渲染控制中枢(适配鸿蒙 HarmonyOS ohos)
前端·flutter·react.js
全栈前端老曹43 分钟前
【前端地图】地图开发基础概念——地图服务类型(矢量图、卫星图、地形图)、WGS84 / GCJ-02 / BD09 坐标系、地图 SDK 简介
前端·javascript·地图·wgs84·gcj-02·bd09·地图sdk
只与明月听43 分钟前
RAG深入学习之向量数据库
前端·人工智能·python
吕不说1 小时前
AI 面试总挂?可能是表达出了问题:三层表达法 + STAR 进阶框架
前端
社恐的下水道蟑螂1 小时前
LangChain 进阶实战:从玩具 Demo 到生产级 AI 应用(JS/TS 全栈版)
前端·langchain·openai
Fairy要carry2 小时前
项目01-手搓Agent之loop
前端·javascript·python