技术栈

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智慧党建主题展厅赋予企业数字化内涵
相关推荐
icebreaker
11 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁
16 分钟前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊
28 分钟前
state和ref
前端·javascript·react.js
GEO_YScsn
29 分钟前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing
29 分钟前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_
33 分钟前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠
35 分钟前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner2000
35 分钟前
Webpack开发:从入门到精通
前端·webpack·node.js
GISer_Jing
37 分钟前
滴滴二面准备(一)
前端·javascript·面试·ecmascript
lecepin
1 小时前
AI Coding 资讯 2025-09-10
前端·javascript·面试
热门推荐
01UV安装并设置国内源02A股预测还能更准?开源大模型Kronos带你跑通预测+回测全流程03解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题04UV 工具安装与国内镜像源配置指南052025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享,全网首发高质量!!!06教你如何认证 Gemini 教育优惠的二次验证,薅个 1年的 Gemini Pro 会员07KGG转MP3工具|非KGM文件|解密音频082025年数学建模国赛C题超详细解题思路09突破百度网盘的下载限速,两种方法教会你【超详细】10conda中设置镜像地址(附所有可换的地址)