html - Bootstrap 3 : Fitting video to grid

Question

我有多个视频，我想以网格格式调整到它的父 bootstrap div，但奇怪的是它增加了 col 的大小，而不是视频本身。

这是代码如何以网格格式运行的示例。在我的 CSS 文件中，gif-video 类的宽度和高度都设置为 300。

这是一个 image代表我的问题。

如果我将 gif-video 的宽度和高度更改为 100%，这就是它的样子。大小正确，但有空格，好像 div 被向下推了一样。

这是一个 image代表这个问题。

<div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <video class="gif-video" autoplay loop poster="http://thumbs.gfycat.com/<%= title %>.jpg">     
                    <source src=<%= gif.webmurl %> type="video/webm">
                    <source src=<%= gif.mp4url %> type="video/mp4">
                </video>  
            </div>
     </div>
</div>

Answer 1

将 max-height 和 max-width 设置为 div ，一些视频必须稍微大一点，可能会将 paddings 推到右边或底部