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

Question

我将相同大小的图像 (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;
}

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

Answer 1

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