作成方法：レスポンシブ画像

CSSを使用してレスポンシブ画像を作成する方法を学びます。

レスポンシブ画像は自動的にスクリーンサイズに合わせて調整されます。

ブラウザのウィンドウサイズを調整して効果を確認してください：

Lights

効果を確認する

レスポンシブ画像の作成方法

第1ステップ - HTMLの追加：

<img src="nature.jpg" alt="Nature" class="responsive">

第2ステップ - CSSの追加：

画像のレスポンシブ性を拡大および縮小の両方に対応させたい場合は、CSSの width 属性を設定します 100%、height 設定値を auto：

例

.responsive {
  width: 100%;
  height: auto;
}

自分で試してみる

画像が必要に応じて縮小するが、元のサイズより大きくはならないようにする場合は、以下を使用してください： max-width: 100%：

例

.responsive {
  max-width: 100%;
  height: auto;
}

自分で試してみる

レスポンシブ画像を最大サイズに制限するには、以下を使用してください： max-width 属性および選択したピクセル値：

例

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

自分で試してみる

関連ページ

チュートリアル：CSS画像

チュートリアル：CSSのレスポンシブウェブデザイン