Javascript 缩放图像&；HTML5视频，适合高度相等的行

我对画廊有点问题。 我尝试将图像和视频放在一行中，并使它们保持相同的高度

我可以通过下面的代码实现这一点，但只有在一行图像的情况下。如果我尝试放置一个视频，它不会工作

var videos=document.querySelector（“.gallery videos”）；
$（“.img行”）。每个（函数（）{
var行=$（此），
rowItems=行。查找（“.gallery项”），
totalMarginSpace=（4*（rowItems.length-1）），
itemsWidthSum=0，
差异，
行项目，
行宽；
videos.addEventListener（'loadeddata'，function（）{
高度（1000）；
对于（变量i=0；i=3）{
diff=（row.width（）-totalMarginSpace）/itemsWidthSum；
行项目。高度（999*diff）；
}否则{
高度（250）；
}
}，假）；
});

这是我的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>

关于如何让我的代码工作有什么想法吗？ 谢谢大家!

代码更新：我将item.width替换为item.offsetWidth（因为width在视频中不返回任何内容）。。这有点好，但是现在包含视频的行比没有视频的行小

找到解决方案！谢谢你的帮助，但我真的很想用JS来解决我的问题。 好的，它确实来自视频，因为它们还没有完全加载。所以我添加了一个eventlistener。我更新了我的代码，以防有人想使用它。

试着做一个表格

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

你的IMG
你的视频
...

---

然后尝试使用响应CSS调整表格。我不知道我是否理解您的问题，但我希望这能有所帮助。

您是说响应性设计吗？这都是关于CSS和HTML的，遵循本教程：但请记住始终使用百分比，不要使用像素，这是您必须更改的第一件事

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