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;添加为视频元素的样式，其他空格将消失。

我将相同大小的图像和视频分别放入父div中，但是它们的父div的大小是不同的？

1 个答案: