视频高度相对于它的 Div答案

【问题标题】：Video Height Relative to it's Div视频高度相对于它的 Div
【发布时间】：2016-08-12 14:36:34
【问题描述】：

我正在尝试在我的网站上以视频的形式发出 号召性用语，但我在使用此代码时遇到了困难。视频占屏幕的 100%，但我只希望它的最大高度为 600 像素（容器的大小相同）。不知道该怎么做。

video {
   position: absolute;
   min-width: 100%;
   min-height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);        
}
#vidBG {
    height:600px;   
}


<div id="vidBG">
    <video autoplay muted>
          <source src="video.mp4" type="video/mp4">
            Your browser does not support the video tag.
     </video>
</div>

【问题讨论】：

是因为绝对定位
我应该把它改成什么？
给你的#vidBG一个position: relative。 Ryan.Hunt 是对的，由于绝对位置，元素从其最近的相对父级获取其坐标和大小，由于从未定义过，因此最终为 html
相对位置不起作用

标签： html css html5-video

【解决方案1】：

删除position: absolute;

CSS：

video {
  /* position: absolute; */
  min-width: 100%;
  min-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#vidBG {
  height: 600px;
}

【讨论】：

视频失真