image要素を背景として表示するJavaScript

Question

実現したいこと

• javascriptでwebページ内の特定のimage要素を背景として表示する機能を動作するようにする

前提

JavaScriptで、以下のhtml構成を下記の要件で動作させたい。

html構成は以下の通りです。

<div class="wc_back"> <div class="wc_back_img"> <img src="画像のURL" /> </div> <div class="wc_back_txt"> <div><p>テキストの内容</p></div> </div> </div>

作成するjavascriptsの要件は以下の通りです。
1."wc_back_img"を親に持つ画像を画面幅一杯で表示してください。
2.表示した際の余白は上下左右すべて0にしてください。
3.画面サイズが変わったら自動でリサイズしてください。
4.画像の高さは最低390pxにしてください。
5.表示した画像に"wc_back_txt"を親に持つテキストを被せてください。
6.テキストの表示位置は、画像の左上にしてください。
7."wc_back_center"を追加持つテキストは画像中央に表示してください。
8.上記html構成が複数存在する場合は全てに適用してください。

発生している問題・エラーメッセージ

4.画像の高さは最低390pxにしてください。
が反映されない

該当のソースコード

// image要素を背景として使う関数
function useImageAsBackground() {
  // wc_backというクラスを持つすべてのimage要素を取得
  const imageElements = document.querySelectorAll('.wc_back img');
  const textElements = document.querySelectorAll('.wc_back_txt');

  if (imageElements.length === textElements.length) {
    // wc_back要素の数だけループ処理を行う
    for (let i = 0; i < imageElements.length; i++) {
      const imageElement = imageElements[i];
      const textElement = textElements[i];

      // 取得したimage要素の親要素に背景要素を作成
      const parentElement = imageElement.parentNode;
      const backgroundElement = document.createElement('div');
      backgroundElement.classList.add('background-element');

      // 取得したimage要素のパスを取得して背景として設定
      const imagePath = imageElement.getAttribute('src');
      backgroundElement.style.backgroundImage = `url(${imagePath})`;

      // 取得したimage要素を非表示にする
      imageElement.style.opacity = '0';

      // 最低の高さを指定するための変数
      const minHeight = 390;

      // 背景要素に対して適用するCSSを設定
      backgroundElement.style.position = 'absolute';
      backgroundElement.style.top = '0';
      backgroundElement.style.left = '0';
      backgroundElement.style.width = '100%';
      backgroundElement.style.height = '100%';
      backgroundElement.style.backgroundSize = 'cover';
      backgroundElement.style.backgroundPosition = 'center';
      backgroundElement.style.backgroundRepeat = 'no-repeat';

      // テキスト要素を配置
      textElement.style.position = 'relative';
      textElement.style.zIndex = '1';

      // 背景要素とテキスト要素を親要素に追加
      parentElement.appendChild(backgroundElement);

      // 背景要素の下部の余白を0に設定
      parentElement.style.paddingBottom = '0';

      // 背景画像の読み込みが完了した後に背景要素の高さを設定する
      imageElement.addEventListener('load', () => {
        const textHeight = textElement.offsetHeight;
        const backgroundHeight = Math.max(textHeight, minHeight);
        backgroundElement.style.height = `${backgroundHeight}px`;

        // 背景要素の下部の余白を0に設定
        parentElement.style.paddingBottom = '0';
      });
    }
  }
}

// HTMLの要素が読み込まれた後に実行する処理
window.addEventListener('DOMContentLoaded', () => {
  useImageAsBackground();
});

試したこと

最低の高さを指定するための変数を調整した

補足情報（FW/ツールのバージョンなど）

下図のようなイメージですが伝わりますでしょうか。

サンプル適用時

Comments

[yambejp]

イメージがわかないので図示できませんか？

Answer 1

この回答はGPT-4による自動生成回答です

以下のように修正してみてください。imageElementのloadイベントリスナーを追加する前に、imageElementのsrc属性を再設定することで、イベントが正しく発火するようになります。

// 背景画像の読み込みが完了した後に背景要素の高さを設定する
imageElement.addEventListener('load', () => {
  const textHeight = textElement.offsetHeight;
  const backgroundHeight = Math.max(textHeight, minHeight);
  backgroundElement.style.height = `${backgroundHeight}px`;

  // 背景要素の下部の余白を0に設定
  parentElement.style.paddingBottom = '0';
});

// 画像の読み込みを再度トリガーするために、src属性を再設定
imageElement.src = imagePath;

これで、画像の高さが最低390pxになるように設定されるはずです。

Answer 2

不明な箇所がいくつかありますがとりあえず雛形
想定と違う箇所があればご指摘ください

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const wc_back=document.querySelector('.wc_back');
  const wc_back_img=document.querySelector('.wc_back_img');
  const img=wc_back_img.querySelector('img');
  const wc_back_txt=document.querySelector('.wc_back_txt');
  wc_back.style=`
  position:relative;
  `;
  wc_back_img.style=`
    background-Image:url(${img.src});
  background-repeat:no-repeat;
  background-size:100%;
  background-position: center;
  min-height:390px;
  `;
  img.style=`
  display:none;
  `;
  wc_back_txt.style=`
  position:absolute;
  top:0;
  `;
});
</script>
<br><br><br>
<div class="wc_back">
<div class="wc_back_img">
<img src="https://gihyo.jp/assets/images/ICON/2015/1367_interview_teratail.png">
</div>
<div class="wc_back_txt">
<div><p>テキストの内容</p></div>
</div>
</div>

Comments

[uniikurashirako]

ご回答頂きありがとうございます。

いただきました雛形を実際に試させていただきました。
画像がコンテンツ幅内に収まっている状態でした。

スクリーンショットを本文文末に追記させていただきました。