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

news2025/1/15 12:51:22

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

9/16 比例值:56.25%

3/4 比例值:75%

<view class="container">
  <video class="video-box" src="xxx.mp4" />
</view>
.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%;
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1154682.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【STL】:list用法详解

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关list的使用&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结构…

SQL注入思路扩展

目录 一、资产搜集 二、开始sql注入常规流程 三、sqlmap验证 总结&#xff1a;测试sql注入的时候不要只局限于明文传输&#xff0c;也要注意编码或者加密后的值。 还没看够&#xff1f;欢迎关注&#xff0c;带你走进黑客世界&#xff0c;下面也有免费的靶场视频 一、资产搜…

HCIA --- 综合实验(结束)

一、实验拓扑及要求 二、整体IP规划 三、解决方案 四、解决步骤配置命令 一、基本部分 一、交换机 1、创建对应VLAN&#xff0c;对应接口划入对应VLAN中&#xff0c;创建Trunk干道&#xff0c;配置HTTP服务器IP LSW1 [sw1]vlan batch 2 to 3 [sw1]interface e0/0/1 [sw1-E…

idea提交代码一直提示 log into gitee

解决idea提交代码一直提示 log into gitee问题 文章目录 打开setting->Version control->gitee,删除旧账号&#xff0c;重新配置账号&#xff0c;删除重新登录就好 打开setting->Version control->gitee,删除旧账号&#xff0c;重新配置账号&#xff0c;删除重新登…

部署前端项目到宝塔面板(腾讯阿里服务器均适用)

写在前面&#xff0c;本网站部署的是前端nuxt.js项目&#xff0c;后端部分在本人的其他博文&#xff0c;请移步 【起步】服务器端 打开自己的轻量服务器的管理面板 确保服务器已经打开&#xff0c;如下图所示 来到域名列表&#xff0c;解析域名&#xff0c;如下图所示 的…

[转载]C++序列化框架介绍和对比

Google Protocol Buffers Protocol buffers 是一种语言中立&#xff0c;平台无关&#xff0c;可扩展的序列化数据的格式&#xff0c;可用于通信协议&#xff0c;数据存储等。 Protocol buffers 在序列化数据方面&#xff0c;它是灵活的&#xff0c;高效的。相比于 XML 来说&…

怎么理解电流超前电压、电压超前电流?

电容和电感&#xff0c;电压超前电流&#xff0c;电流超前电压都是我们经常听到的。作为非专业人士&#xff0c;这些听起来确实有点摸不着头脑&#xff0c;今天特别查了下电容、电感、电压电流相关资料&#xff0c;总算是弄明白了&#xff0c;在此特地记录下&#xff01; 1. 电…

打造企业级门户,WorkPlus助您打造个性化与高效的企业通讯平台

在现代企业运营中&#xff0c;良好的内部沟通与信息管理至关重要。为满足企业对于高效沟通与信息发布的需求&#xff0c;WorkPlus推出了企业门户APP&#xff0c;为企业提供全新的信息管理与沟通协作体验。 作为一站式企业门户&#xff0c;WorkPlus连接了组织、员工和信息的纽带…

GitLab(2)——Docker方式安装Gitlab

目录 一、前言 二、安装Gitlab 1. 搜索gitlab-ce镜像 2. 下载镜像 3. 查看镜像 4. 提前创建挂载数据卷 5. 运行镜像 三、配置Gitlab文件 1. 配置容器中的/etc/gitlab/gitlab.rb文件 2. 重启容器 3. 登录Gitalb ① 查看初始root用户的密码 ② 访问gitlab地址&#…

阿里云国际版和国内版的区别是什么,为什么很多人喜欢选择国际版?

阿里云国际版和国内版区别如下&#xff1a; 谈到区别&#xff0c;我们不妨先来对比下相同点与不同点&#xff0c;才能清晰明确的知道二者区别 下面先介绍不同点&#xff1a; 面向市场更广泛 阿里云国际版主要是面向国际&#xff08;全球&#xff09;客户的&#xff0c;而国内…

如何用ChatGPT快速写出一份合格的PPT报告

我们【AI写稿专家】的小伙伴中有很多企业高管和公务员&#xff0c;大家经常有写报告写ppt的需求&#xff0c;下面小编给大家介绍一下我们新发布生成PPT的功能&#xff0c;很简单很方便&#xff0c;看完大家不到1分钟就能生成一份拿得出手的PPT报告&#xff0c;再也不用费尽心思…

华为云之使用CCE云容器引擎部署Nginx应用【玩转华为云】

华为云之使用CCE云容器引擎部署Nginx应用【玩转华为云】 一、本次实践介绍1.本次实践简介2.本次实践目的 二、CEE介绍1.CCE简介2.CCE产品链接 三、创建虚拟私有云VPC1.访问VPC2.创建VPC3.查看VPC列表 四、创建密钥对1.进入密钥对界面2.创建密钥对3.保存密钥文件到本地 五、创建…

Softing dataFEED OPC Suite将西门子PLC数据存储到Oracle数据库中

一 背景 现代工业产品生产批量大、过程自动化程度高&#xff0c;这对于用户追溯产品设计与制造过程中产生的数据而言&#xff0c;无疑是一大新挑战。与此同时&#xff0c;制造商们对产品制造过程中产生的大量工艺数据也愈发重视&#xff0c;并在不断寻求存储与分析产品制造数据…

【zTree】节点添加不同操作按钮,点击后生成弹窗

zTree api 文档&#xff1a;https://www.treejs.cn/v3/api.php 1. 初始化树的配置项 const initZtreeSetting () > {const setting {view: {addHoverDom: addHoverDom, // 显示用户自定义控件selectedMulti: false,// 是否允许同时选中多个节点&#xff0c;默认为truesh…

HarmonyOS鸿蒙原生应用开发设计- 隐私声明

HarmonyOS设计文档中&#xff0c;为大家提供了独特的隐私声明&#xff0c;开发者可以根据需要直接引用。 开发者直接使用官方提供的隐私声明内容&#xff0c;既可以符合HarmonyOS原生应用的开发上架运营规范&#xff0c;又可以防止使用别人的内容产生的侵权意外情况等&#xff…

程序开发官网地址汇总

这里写目录标题 官网地址汇总开发环境开发工具数据库驱动包其他 官网地址汇总 开发环境 1 JDK &#xff1a;https://www.oracle.com/java/technologies/java-se-glance.html 2 Maven&#xff1a;https://maven.apache.org/download.cgi 3 Maven Repository: https://mvnrep…

启动U盘制作工具------------Ventoy 最新版 v1.0.96

Ventoy最新版是一款功能强大的启动U盘制作工具,Ventoy最新版支持多系统启动盘的制作功能,Ventoy最新版一次还可以拷贝很多个不同类型的ISO文件,软件支持自动安装部署、支持超过4GB的ISO文件、支持大部分常见操作系统和无差异支持Legacy+UEFI模式。软件能够直接启动WIM文件。…

搜索语法备忘

搜索途径 传统搜索引擎&#xff1a;Goolge、Bing、Sogou、Baidu微信搜一搜视频内容&#xff1a;哔哩哔哩、抖音AI&#xff1a;文言一心、ChatGPT 传统搜索引擎中&#xff0c;Goolge 和 Sogou 可以搜索到微信公众号的内容。这很重要&#xff0c;根据我的主观感受&#xff0c;微…

PSP - 蛋白质复合物 AlphaFold2 Multimer MSA Pairing 逻辑与优化

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/134144591 在蛋白质复合物结构预测中&#xff0c;当序列 (Sequence) 是异源多链时&#xff0c;无论是AB&#xff0c;还是AABB&#xff0c;都需要 …

Python实现hellokitty

目录 系列文章 前言 绘图基础 HelloKitty 尾声 系列文章 序号文章目录直达链接1浪漫520表白代码https://want595.blog.csdn.net/article/details/1306668812满屏表白代码https://want595.blog.csdn.net/article/details/1297945183跳动的爱心https://want595.blog.csdn.n…