纯css实现视频容器动态尺寸并且固定长宽比

1. 使用场景

PC端播放视频容器一般要求是16：9，同时支持多路视频同时播放，可选多种窗格22 、33 、1*1等等。。。就是要实现宽度变化，高度跟着变化，并且保证长宽比为16：9，或者其他比例，看项目需求。

纯css实现原理

设置外层容器。开启flex布局，使内部元素动态占满容器，注意开启换行
设置内部元素宽度，根据不同的窗格数量，设定不同的百分比宽度，让其占满容器
使用一张图片，其长宽比为16：9，尺寸可以为1920*1080，将其放入每个内部元素，并设置img的宽度为100%，注意不要设置高度，这样图片的宽度总是占满内部元素的宽度，为了保证图片的比例不变，图片的高度会自动变化。然后图片的高度会撑开每个内部元素。从而实现每个内部元素的动态尺寸且固定长宽比；比例由图片本身尺寸控制；
在每个内部元素（放图片的同级）中设置一个元素，开启定位，让其覆盖在图片上。这里放你的业务组件
扩展性：可以让这个图片做成加载中的样式，在业务组件没加载完成之前显示。业务组件加载之后覆盖图片。完美，这样就不用去判断加载中的显示与隐藏，简单实用。

直接上代码（当前组件中没有的class为全局公共class，开发者自己一看就懂）

<template><div class="video-box"><div v-for="(e, i) in windowNum" :key="i" :class="['video-item', 'video-' + windowNum]"><img :src="tcimg" alt=""><div class="video-view">视频内容</div></div><div><p class="flex flex-row-start" style="margin-top:20px">视频规格： <span class="gg-1" @click="changeNum(1)"></span> <span class="gg-1 gg-4" @click="changeNum(4)"></span><span class="gg-1 gg-9" @click="changeNum(9)"></span></p></div></div>
</template>
<script>
export default {name: 'SmartthingsWebVideogroup',props: {winList: {type: Array,required: true}},watch: {winList(n, l) {console.log(n, '最新的')}},data() {return {windowNum: 1,tcimg: require('@/assets/images/16-9.png')}},mounted() {console.log(this.winList)},methods: {changeNum(val) {this.windowNum = val}}
}
</script><style lang="less" scoped>
.video-box {display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;.video-item {position: relative;margin-top: 10px;img{width: 100%;}.video-view{position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: #ccc;}}.video-1 {width: 100%;}.video-4 {width: calc(50% - 5px);}.video-9 {width: calc(33.33% - 6px);}
}
</style>

效果图

纯css实现视频容器动态尺寸并且固定长宽比相关推荐

175.纯 CSS 实现视频转场特效
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"><head><m ...
纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法在曾经的"淘宝UED招聘"中有这样一道题目: "使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.&quo ...
纯CSS（基于CSS3）实现表格固定行列（附：样式与JS配置实现固定列行）
方法一.CSS3(position:sticky)实现固定行与列这个是我正在使用的固定行列的方式,使用的新最的CSS3样式:position:sticky. 感觉上去这个样式与position:fi ...
纯css实现emoji动态表情
当然可以通过纯CSS来实现emoji动态表情. 要实现emoji动态表情,您可以使用CSS中的"animation"属性.此属性允许您定义动画效果的各个方面,例如持续时间,动画类型 ...
before css 旋转_单标签！纯CSS实现动态晴阴雨雪
引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <div c ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
纯CSS实现动态晴阴雨雪
1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码: <!-- ...
如何用纯CSS将图片填满div，自适应容器大小
如何用纯CSS将图片填满div,自适应容器大小 2016-10-11 13:33 网页设计标签:css 代码 5987 3 我有一个模板,想按常规做一个div里面放置一个img图 ...
css画圆, 如何用纯css实现一个动态画圆环效果
最终的效果是:用纯css实现动态画圆的动画效果 html结构如下: <div class="wrap"> <div class="circle" ...

纯css实现视频容器动态尺寸并且固定长宽比

1. 使用场景

纯css实现原理

直接上代码（当前组件中没有的class为全局公共class，开发者自己一看就懂）

效果图

纯css实现视频容器动态尺寸并且固定长宽比相关推荐

最新文章

热门文章