画像とHTML5動画の高さが同じではない

Question

画像と動画を整列させて反応させようとしています。

今私の問題は、それが全体の親のサイズになりませんように、ビデオが

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

がlist-itemがChromeでそれを固定ではなくFirefoxの上で修正されません、それを作るの画像と同じ位置を合わせませんですこれを取り除いて仕事をしたいからです。

list-style-type: none; 

問題は、その側にドットがあります。 this JSFiddleで

.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>

も。

Answer 1

display：flexを使用すると、画像とサムネイルを整列させ、それぞれのフレックス基準を16.6（100/6）に設定して、両者を等分することができます。 ビデオのサイズを変更できないため、same aspect-ratio as your videoに画像が必要ですが、それに応じてclip or resize your imageにすることができます。

.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>

Answer 2

あなたはジャバスクリプトのsmidgeでそれを行うことができます：ここではデモだ

//assuming all images are same size, get the height of the first image 
var imgheight = document.querySelector("div.thumbnails-div > a > img:first-of-type").parentNode.parentNode.getBoundingClientRect().height; 

var videos = document.getElementsByTagName("video"); 

//since width is set to 100% and height auto you will get videos with same width as images with space on top/bottom 
for (var i=0; i<videos.length; i++){ 
    videos[i].height = imgheight; 
} 

作業フィドルは、あなたが別のブラウザに期待するものの写真を追加https://jsfiddle.net/7ssgpudp/3/