jquery - 根据可用宽度显示不同大小的图像

Question

我的网站上有一个两栏布局，上面有 100 多张幻灯片。每张幻灯片都包含一张图片和一段视频。有些幻灯片上有视频，有些则没有。由于图像和视频都在同一行，因此它们共享幻灯片的宽度为 50% - 50%。

现在，我的问题是，如果幻灯片上没有视频，如何自动将图像的宽度设置为 100%。这应该在页面加载时发生，因为所有幻灯片都是同时加载的，然后用户向左或向右滑动。

以下是 HTML：-

<div class="body-content">  
    <h1 class="content-title">
        Heading
    </h1>
    <p>
        // This is the Main Image.
        <img src=".jpg Link comes here"></p>

        // This is the Side Video. On Pages without video, this DIV wouldn't exist.
        <div class="profile-video red-border">  
        <div class="field field-name-field-video field-type-file field-label-hidden">
            <div class="field-items"><div class="field-item even">
                <div class="jwplayer-video">
                  <div id="77efb90a6cda2b6853724f33b58f33e7_wrapper" style="position: relative; width: 133px; height: 168px;">
                    <object tag for Video>
                  </div>
                </div>
            </div>
        </div>
        </div>
</div>

希望，我猜一些 JQuery 可以在这里帮助我。

谢谢。