我把相同大小的图片和视频分别放到一个父div中，但是它们的父div大小不一样？答案

【问题标题】：I put the same size image and video into a parent div separately, but the size of their parent divs are different?我把相同大小的图片和视频分别放到一个父div中，但是它们的父div大小不一样？
【发布时间】：2017-11-03 16:08:48
【问题描述】：

我将相同尺寸的图片 (300x400) 和视频 (300x400) 分别放入父 div 中。

<div class="bgimage col-md-12 col-sm-12 col-xs-12 ">
            <div class="ol-md-6 col-sm-6 col-xs-12">
              <img  src="img"  >
            </div>
</div>

和

 <div class="bgimage col-md-12 col-sm-12 col-xs-12 ">
        <div class="ol-md-6 col-sm-6 col-xs-12">
               <video   loop autoplay class="autov">
                  <source src="./resources/img/Video.mp4" type="video/mp4">
                </video> 
        </div>
    </div>

这是css中的定义。

.bgimage {
   background-image: url(../img/bg2.png);

    /* Full height */
    height: 100%; 
    width:100%;
    padding: 30px 50px 30px 50px;
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;

    /* Background image doesn't tile */
     background-repeat: no-repeat;
    /* This is what makes the background image rescale based
     on the container's size */
    background-size: 100% 100%;

    /* Set a background color that will be displayed
     while the background image is loading */
    background-color: #red;
}

但是视频的容器高度略大。

【问题讨论】：

您在 col-md-6 中还缺少一个“c”
@Liquidchrome 谢谢。
我问这个问题是因为屏幕上的图像和视频的大小相同。而且他们的底线是同一水平的。

标签： html css twitter-bootstrap

【解决方案1】：

虽然到目前为止我从未遇到过 video 元素，而是使用内联图像，但修复方法相同且非常简单：将vertical-align: top; 作为样式添加到您的视频元素中，额外的空白将消失。

【讨论】：

感谢您的回答。它确实有效。差异减少了，但仍然有少量。
谢谢！我认为你的解决方案就足够了。我通过matlab生成视频。而且matlab似乎改变了图像的大小'警告：视频的宽度和高度已根据H.264编解码器的要求填充为2的倍数。