Fatal编程技术网
  • html/
  • Html 相对于它的视频高度'；s分区

Html 相对于它的视频高度'；s分区

html css

Html 相对于它的视频高度'；s分区,html,css,html5-video,Html,Css,Html5 Video,我试图在我的网站上以视频的形式呼吁大家采取行动，但我在使用这段代码时遇到了困难。视频100%显示在屏幕上，但我只希望它的最大高度为600px（与容器大小相同）。不知道该怎么办 video { position: absolute; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #vidBG { hei

我试图在我的网站上以视频的形式呼吁大家采取行动，但我在使用这段代码时遇到了困难。视频100%显示在屏幕上，但我只希望它的最大高度为600px（与容器大小相同）。不知道该怎么办

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>

视频{
位置：绝对位置；
最小宽度：100%；
最小高度：100%；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#vidBG{
高度：600px；
}
您的浏览器不支持视频标记。
移除
位置：绝对

CSS:


移除
位置：绝对位置

CSS:


这是因为绝对位置我应该把它改成什么？给你的
#vidBG
一个
位置：相对的
。Ryan.Hunt是对的，因为绝对位置，元素从其最近的相对父元素获取坐标和大小，因为它从未定义过，最终成为
html
position relative不起作用这是因为绝对位置我应该把它改成什么？给你的
\vidBG
一个
位置：relative
。Ryan.Hunt是对的，因为绝对位置，元素从其最近的相对父元素获取其坐标和大小，因为从来没有定义过，所以最终是
html
position relative未工作视频变为扭曲视频变为扭曲

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

#vidBG {
  height: 600px;
}