缩放图像和HTML5视频以使其等高

Question

我的画廊有点问题。 我正在尝试连续放置图像和视频，并让它们保持相等的高度。

\n

我可以使用以下代码实现这一点，但是仅当图像充满一行时才可以实现。 如果我尝试放置视频，则无法正常播放...

    var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
    var row = $(this),
        rowItems = row.find(".gallery-item"),
        totalMarginSpace = (4 * (rowItems.length - 1)),
        itemsWidthSum = 0,
        diff,
        rowItem,
        rowItemWidth;
    videos.addEventListener('loadeddata', function() {
        rowItems.height(1000);
        for(var i = 0 ; i < rowItems.length ; i++) {
            rowItem = rowItems[i];
            rowItemWidth = $(rowItem).outerWidth();
            itemsWidthSum += rowItemWidth;
        }
        if(rowItems.length >= 3) {
            diff = (row.width() - totalMarginSpace) / itemsWidthSum;
            rowItems.height(999 * diff);
        } else {
            rowItems.height(250);
        }
    }, false);
});

这是我的HTML：

<section class="gallery-section">

<div class="img-row">
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item margot" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
</div>

关于如何使我的代码正常工作的任何想法？ 谢谢 ！

\n

更新代码：我用item.offsetWidth替换了item.width（因为视频宽度不返回任何内容）..更好一点，但是现在包含视频的行比不包含视频的行小。

找到解决方案！ 感谢您的所有帮助，但我真的很想使用JS解决我的问题。 好的，它确实来自视频，因为它们尚未完全加载。 因此，我添加了一个事件监听器。 我更新了代码，以防有人使用。

Answer 1

尝试做一张桌子

<table>
  <tr>
    <th>your imgs</th>
    <th>your videos</th>
    ...
  </tr>
 </table>

然后通过本教程尝试使用响应式CSS调整表格。 我不知道我是否了解您的问题，但希望对您有所帮助。

Answer 2

这可以使用引导程序来完成。 使用col-md-x概念。
有关完整的教程，请访问https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp 。

请通过此链接https://bootsnipp.com/tags/gallery 。
我希望这能帮到您。 这里给出了一些出色的模板。 它肯定会为您提供一个不错的入门代码。