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%;
  }
}
相关推荐
deli00719 分钟前
32K 上下文塞满后,AI 最先忘掉什么?120 轮对话实测
前端
deli0071 小时前
手机拍灯为什么有一条条黑纹?PWM 240Hz 实测
前端
wangruofeng6 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng6 小时前
给前端开发者的 100 个设计参考网站
前端·设计
星栈9 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技9 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户479492835691510 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马12 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng12 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding13 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js