jquery - 利用可能な幅に基づいて異なるサイズの画像を表示する

Question

Web サイトに 2 列のレイアウトがあり、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 がここで私を助けることができると思います。

ありがとう。