保持元素宽高比

css 属性: aspect-ratio

兼容性问题:Google 浏览器 2021 年后 88+ IE 不支持 ( Can I Use )

  • 宽度不固定
  • 高度不固定( 不给高度 height )
html 复制代码
<body>
  <style>
    div {
      width: 50%;
      background-color: red;
      aspect-ratio: 1/2;
    }
  </style>
  <div></div>
</body>
使用padding + 定位
html 复制代码
 <body>
    <style>
      .item {
        background-color: red;
        width: 50%;
        margin: 0 auto;
      }
      .inner {
        /* 跟随父原生的宽度变化 */
        width: 100%;
        /* 需要了解视觉格式化模型和包含块 */
        /* padding的百分比相当于父元素的百分比 */
        padding-top: 75%;
        /* 此定位是为了container使用 */
        position: relative;
      }
      .container {
        position: absolute;
        /* CSS 属性 inset 为简写属性,对应于 top、right、bottom 和 left 属性。其与 margin 简写属性具有相同的多值语法 */
        inset: 0;
        background-color: blue;
      }
    </style>
    <div class="item">
      <div class="inner">
        <div class="container">这是测试文字</div>
      </div>
    </div>
  </body>
相关推荐
拉不动的猪1 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛1 小时前
next.js项目部署流程
开发语言·前端·javascript
非凡ghost1 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
神膘护体小月半1 小时前
bug 记录 - 路由守卫 beforeRouteLeave 与 confirm 结合,不生效问题
javascript·vue
岁月宁静1 小时前
Vue 3.5 + WangEditor 打造智能笔记编辑器:语音识别功能深度实现
前端·javascript·vue.js
非凡ghost1 小时前
BiliLive-tools(B站录播一站式工具) 中文绿色版
前端·javascript·后端
非凡ghost1 小时前
bkViewer小巧精悍数码照片浏览器 中文绿色版
前端·javascript·后端
西洼工作室2 小时前
前端监控:错误捕获与行为日志全解析
前端·javascript
huangql5202 小时前
JavaScript数据结构实战指南:从业务场景到性能优化
javascript·数据结构·性能优化
Glommer2 小时前
某易易盾验证码处理思路(下)
javascript·逆向