74214


## 聞きたいこと

画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小する方法。  
html,css,javascript関連です。

## 現状と理想

現状）画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小しているが、重なってしまっている。  
理想）画像を横並びで表示し、かつ、ディスプレイサイズに合わせて縮小しているが、重ならないようにしたい。  
[![画像の説明をここに入力](https://i.stack.imgur.com/63d2s.png)](https://i.stack.imgur.com/63d2s.png)

## 背景

2枚の画像から、正解を選ぶクイズwebアプリを作成しようとしています。  
画像の表示方法にてこずっております。

## コード

### HTML

[code]

    <div class="flex">
          <div id="left">aaa</div>
          <div id="right">aaa</div>
    </div>
    
[/code]

### CSS

[code]

    .flex {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    .flex::before {
      padding-top: 100%;
    }
    .flex div {
      width: 50%;
    }
    
[/code]

### Javascript ※不要かもしれませんが一応。

[code]

    // 問題文をランダムに作成。
    
    let imageNumber = Math.floor(Math.random() * molfArray.length);
    let molfQuestionName = molfArray[imageNumber];
    let questionElement = document.getElementById("question-molf-name");
    questionElement.innerText = molfQuestionName;
    
    // 正解のモルフを用意する。
    
    let imageElement = document.getElementById("left");
    let imageMolf = '<img src="image/' + molfQuestionName + '.jpg">';
    // imageElement.innerHTML = imageMolf;
    
    // 不正解のモルフを用意する。
    
    do {
      i = Math.floor(Math.random() * molfArray.length);
    } while (i === imageNumber);
    let notImageNumber = i;
    let notImageElement = document.getElementById("right");
    let notImageMolf = '<img src="image/' + molfArray[notImageNumber] + '.jpg">';
    // notImageElement.innerHTML = notImageMolf;
    
    // 正解と不正解を格納した配列を用意する。
    
    let optionArray = [];
    optionArray[0] = imageMolf;
    optionArray[1] = notImageMolf;
    
    // 正解と不正解をランダムにエレメントに格納する。
    
    c = Math.floor(Math.random() * 2);
    do {
      d = Math.floor(Math.random() * 2);
    } while (c === d);
    
    a = c;
    b = d;
    
    imageElement.innerHTML = optionArray[a];
    notImageElement.innerHTML = optionArray[b];
    
[/code]

## 備考

本業はbiz側で、非エンジニアです。  
初質問になるため、その他回答に必要な情報がございましたらお申し付けください。


CC BY-SA 4.0
2021-02-22T17:49:30.827
74213
2021-02-22T18:28:13.007
44078
question
javascript html css
CSSで、画像を横並び＆重ならない＆ディスプレイサイズに合わせて縮小したい。


この問題は読み込んでいる画像のサイズが大きく、 **横並びにしている`div` 要素から画像がはみ出してしまっている**ことが原因です。`div` 要素
(`#left`, `#right`) へ横幅を指定していても、その子要素にあたる `img` 要素には横幅の制約は適用されません。

つまり、 **`img`
要素に対して横幅の制約を加える**ことでこの問題を解決することが出来ます。今回の場合は、親要素以上の横幅にはなってはいけないため、最大横幅を設定する
[`max-width` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/max-
width)が利用出来ます。そして子要素の横幅が親要素に依存していることから、親要素の横幅を表す相対単位である[パーセンテージ](https://developer.mozilla.org/ja/docs/Web/CSS/percentage)を用いると良いことがわかります。

以上より、修正したコードは次のようになります。質問文のコードに変数 `molfArray`
が含まれていなかったため、このコードでは簡単なテストデータを入れた変数 `molfArray` を定義しています。

[code]

    const molfArray = [
      "https://placehold.jp/ff0000/ffffff/1000x1000.png?text=1",
      "https://placehold.jp/00ff00/ffffff/1000x1000.png?text=2",
    ];
    
    let imageNumber = Math.floor(Math.random() * molfArray.length);
    let molfQuestionName = molfArray[imageNumber];
    let questionElement = document.getElementById("question-molf-name");
    questionElement.innerText = molfQuestionName;
    
    // 正解のモルフを用意する。
    
    let imageElement = document.getElementById("left");
    let imageMolf = '<img src="' + molfQuestionName + '.jpg">';
    // imageElement.innerHTML = imageMolf;
    
    // 不正解のモルフを用意する。
    
    do {
      i = Math.floor(Math.random() * molfArray.length);
    } while (i === imageNumber);
    let notImageNumber = i;
    let notImageElement = document.getElementById("right");
    let notImageMolf = '<img src="' + molfArray[notImageNumber] + '.jpg">';
    // notImageElement.innerHTML = notImageMolf;
    
    // 正解と不正解を格納した配列を用意する。
    
    let optionArray = [];
    optionArray[0] = imageMolf;
    optionArray[1] = notImageMolf;
    
    // 正解と不正解をランダムにエレメントに格納する。
    
    c = Math.floor(Math.random() * 2);
    do {
      d = Math.floor(Math.random() * 2);
    } while (c === d);
    
    a = c;
    b = d;
    
    imageElement.innerHTML = optionArray[a];
    notImageElement.innerHTML = optionArray[b];
[/code]

[code]

    .flex {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    
    .flex::before {
      padding-top: 100%;
    }
    
    .flex div {
      width: 50%;
    }
    
    img {
      max-width: 100%; /* 追加 */
    }
[/code]

[code]

    <div id="question-molf-name"></div>
    <div class="flex">
      <div id="left">aaa</div>
      <div id="right">aaa</div>
    </div>
[/code]


CC BY-SA 4.0
2021-02-22T18:28:13.007
74214
2021-02-22T18:28:13.007
32986
74213
answer