uniapp 关于 video 组件的缩放比例问题

在 container 样式的 padding-bottom 设置比例值

9/16 比例值:56.25%

3/4 比例值:75%

html 复制代码
<view class="container">
  <video class="video-box" src="xxx.mp4" />
</view>
css 复制代码
.container {
  position: relative;
  width: 100%;
  height: 0;
  // 因为 padding 和 margin 等受 width 影响,父容器固定后,子标签可以进行填充。
  // 此处的 56.25% 是 9/16【 75% 是 3/4 】其他比例可以依照此法
  padding-bottom: 56.25%;
  .video-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
相关推荐
MXN_小南学前端10 分钟前
Vue 视频上传实战:视频预览、MediaRecorder 压缩与自定义上传
前端·vue.js
Hilaku22 分钟前
AI 生成的代码都是一坨屎?聊聊怎么给 Agent 制定工程约束
前端·javascript·ai编程
吴声子夜歌28 分钟前
Vue3——使用Vue Router实现路由
前端·javascript·vue.js·vue-router
whinc39 分钟前
Node.js技术周刊 2026年第16周
前端·javascript
DyLatte42 分钟前
我做了个AI项目后才发现:会做事的人,正在输给会讲故事的人
前端·后端·程序员
深海鱼在掘金42 分钟前
从Claude Code泄露源码看工程架构:第三章 — CLI 启动链路的分流策略与按需加载机制
前端·人工智能·设计模式
踩着两条虫42 分钟前
VTJ:低代码平台原理
前端·低代码·ai编程
颜酱44 分钟前
提示词强化1:三个让大模型更「听话」的习惯
前端·javascript·人工智能
破茧成蝶81044 分钟前
修复播报缺失文字的bug,改为“播放单个 -> 等待结束 -> 延迟 10ms秒 -> 播放下一个”的递归/循环模式
前端
颜酱1 小时前
提示词强化 2:元提示(Meta-Prompt)与动态提示词
前端·javascript·人工智能