アダプティブ イメージまたはレスポンシブ イメージは、画面サイズまたはデバイスに基づいて適切なイメージを読み込む方法の組み合わせです。アダプティブ画像は、さまざまな画面サイズやデバイスに応じて自動的に調整されます。アダプティブ画像では、Web ページにアクセスするデバイスごとに異なるレイアウトを作成する必要があります。 CSS Flexbox を使用してアダプティブ イメージを簡単に作成できます。 Flexbox は、行または列を作成する CSS レイアウトの 1 次元モデルです。 Flexbox を使用すると、応答性の高い構造を簡単に作成できます。
この投稿では、CSS Flexbox を使用してアダプティブ画像を作成するためのガイダンスを提供します。
CSS Flexbox を使用してアダプティブ画像を作成する方法
CSS Flexbox を使用してアダプティブ イメージを作成するには、まず HTML 構造を作成し、次に CSS を適用する必要があります。実際のデモンストレーションを行うには、以下の手順を実行してください。
HTML構造の作成
を作成します まず、「」を設定してフレックスボックスを作成します。 画面 ” プロパティ値を “ フレックス ”の中” 画像コンテナ 」 次に、「」を指定して画像にCSSを適用します。 画像 ' 一緒に ' .images-container ' 名前。まず、「」を設定します。 フレックス ” プロパティ値を “ 1 」を使用して、利用可能な空き容量を画像間で均等に分配します。次に、「」を設定します。 最大幅 ” プロパティ値を “ 100% 」を使用して、画像が元の幅を超えないようにしてください。をセットする ' 身長 ” プロパティ値を “ 自動 」を使用してアスペクト比を維持します。最後に、「」を設定して画像間の間隔を追加します。 マージン ” プロパティ値を “ 10ピクセル ”: CSS Flexbox を使用したアダプティブ画像が正常に作成されました。以下の出力ビューは、ブラウザ ウィンドウが折り返される前です。 次に、ブラウザ ウィンドウをラップして、画像がアダプティブであるかどうかを確認してみましょう。 CSS Flexbox を使用してアダプティブ画像を作成するには、ユーザーはまず HTML 構造を作成し、次に、 内に「」を追加します。 送信元 ” タグで画像パスを指定し、” を使用して代替画像を追加します。 すべて ' 鬼ごっこ：
< ディビジョン クラス = 「イメージコンテナ」 >
< 画像 送信元 = 「画像-1.jpg」 すべて = 「最初の画像」 >
< 画像 送信元 = 「画像-2.jpg」 すべて = 「2枚目の画像」 >
ディビジョン >
CSSを適用する
画面： フレックス ;
フレックスラップ: ラップ;
}
.images-container 画像 {
フレックス： 1 ;
最大幅: 100 % ;
高さ: 自動;
マージン: 10px;
}
ラップ前 
ラップ後 
上の画像は、追加された画像がアダプティブであることを確認します。 結論