css - 图片和 HTML5 视频不会有相同的高度

Question

我正在尝试使图像和视频对齐并响应。

现在我的问题是视频不会与图像对齐，因为它不会占用整个父级大小

display: list-item;
list-style-type: none; 

让它成为 list-item 在 Chrome 上修复它，但不会在 Firefox 上修复，因为它希望它删除它才能工作。

 list-style-type: none;

问题是它的边上有圆点。

.wrap-thumbnails-div {
    text-align: center;
    overflow: hidden;
    margin: 30px 0;
    width: 100%;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.thumbnails-div {
    display: list-item;
    list-style-type: none;
    width: 16.6%;
    float: left;
}

<div class="wrap-thumbnails-div">
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href=""><video width="100%" height="auto" autoplay="false" loop="">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
   </video></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href=""><video width="100%" height="auto" autoplay="false" loop="">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
   </video></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href=""><video width="100%" height="auto" autoplay="false" loop="">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
   </video></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/405x292?text=405x292"></a>
  </div>    
</div>

也在 this JSFiddle 中.

Answer 1

您可以使用 display:flex 对齐图像和缩略图，并将它们各自的 flex-basis 设置为 16.6 (100/6) 以在它们之间平均分配。 您需要您的图像具有与您的视频相同的宽高比，因为您无法调整视频的大小，但您可以根据它裁剪或调整图像。这是演示:

.wrap-thumbnails-div {
  text-align: center;
  overflow: hidden;
  margin: 30px 0;
  width: 100%;
  flex-flow: row wrap;
  display:flex;
}

.img-fluid {
  max-width:100%;
  flex:1 1 16.6%;
}

.thumbnails-div {
  flex:1 1 16.6%;
}

<div class="wrap-thumbnails-div">
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="">
      <video width="100%" height="auto" autoplay="false" loop="">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      </video>
    </a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="">
      <video width="100%" height="auto" autoplay="false" loop="">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      </video>
    </a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
  <div class="thumbnails-div">
    <a href="">
      <video width="100%" height="auto" autoplay="false" loop="">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
      </video>
    </a>
  </div>
  <div class="thumbnails-div">
    <a href="#"><img class="img-fluid" src="https://via.placeholder.com/510x292?text=510x292"></a>
  </div>
</div>