css - video 視頻大小與手機

问题描述

问 题

想問一下這個
https://www.spectacles.com/
最下面的那個視頻
他可以融合所有螢幕且一樣大
手機看時也可以高度和寬度跟手機大小一樣 但是視頻不會變形....
請問這該怎麼做？

#cover3
{
 width:100%;
 height:100%;
}
#cover3 video
{
 width: 100vw;
 height: 100%;
}

<div class="cover" id="cover3">
<video preload="auto" muted="" playsinline="" autoplay="" loop="">
<source src="cover.mp4" type="video/mp4"> 
  </video>
</div>

解决方案

谢邀，这种布局，其实是一个宽高等比例缩放布局的问题。

父元素宽高等比例，子元素就是video标签，width和height都100%。

先占坑，来给你写个demo

---

更新一下，发现原来才是整屏铺满的效果
整屏的效果
https://jsfiddle.net/temz7qj7/1/

这篇关于css - video 視頻大小與手機的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！