前端Vedio设置宽高比

作者: yxz247 | 来源:发表于2019-10-31 17:07 被阅读0次

给video包一层div

  <div>
    <video/>
  </div>

设置外层div与vedio的属性

  <div width="你想设置的宽度" height="你想设置的高度">
    <video width = '100%' height = '100%'  object-fit = 'cover'/>
  </div>

同时讲下object-fit的其他属性

contain 被替换的内容内容会缩放，在填充的内容区域内保持默认的宽高比。

cover被替换的内容保持宽高比填充内容框。如果宽高比不一致，会显示裁剪区域。

fill 拉伸填充

none被替换内容保持默认尺寸

scale-down 为none或contain中对象尺寸最小的一个

前端Vedio设置宽高比
给video包一层div 设置外层div与vedio的属性同时讲下object-fit的其他属性 contain...
Flutter 2.12 AspectRaito Card卡片
1.AspectRaito可以设置子元素的宽高比比如设置图片的宽高比 2.Card列表卡片效果ListView ...
Android ImageView高度根据图片比例自适应
设置adjustViewBounds // 是否保持宽高比
Flutter 组件
Align对齐布局，指定child的对齐方式 AspectRatio调整宽高比，根据设置的宽高比调整child组件...
android适应全面屏
一、设置最大宽高比1、系统默认最大宽高比为1.86；随着手机市场的发展，这个宽高比已经不能满足需求的，会使部分屏幕...
Android ImageView高度根据图片比例自适应
设置adjustViewBounds // 是否保持宽高比重要的两句：动态设置view宽高
Android控件设置宽高比
0. 困扰很久的问题 Android控件的宽和高保持比例，这是从我接触Android以来，一直不断会遇到的需求。以...
glide .asBitmap()后.placeholder()
实现瀑布流过程中使用glide来获取网络图片。现在有这么一个需求：根据图片的宽高比来设置ImageView的宽高比...
css样式写半圆
宽高比是2:1,border-radius设置为宽的长度如图所示：
Flutter 常用组件
常用组件 1、布局组件 AspectRatio：根据设置调整子元素 child 的宽高比。IntrinsicHe...

网友评论

本文标题：前端Vedio设置宽高比

本文链接：https://www.haomeiwen.com/subject/qzmtbctx.html