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

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能够在这里帮助我。

感谢。