Bootstrap によるレスポンシブ Web デザイン

レスポンシブイメージを配置する

ここでは画像の配置について例示します．次のような小さな画像（幅:250px，高さ：250px）では src と alt 属性を追加するだけで画像を表示でき，画面の幅を超えてしまうことは考えにくいでしょう．

index.html（抜粋）コピー
<p>
  <img src="ink.png" alt="ink">
</p>

次の画像は幅が2000pxもあるので画面（または親要素のコンテナ）の幅を超えてしまう可能性が大です．このような場合は右方向へのスクロールも必要になり，明らかにブサイクなページになってしまいます．

index.html（抜粋）コピー
<p>
  <img src="eye-02.jpg" alt="eye-02">
</p>

幅の大きな画像をレスポンシブイメージとして表示するには class="img-fluid" を追加します．これによって親要素の幅いっぱいに画像が拡大（または縮小）されて美しく配置できます．また，画面のサイズを変えたときに画像の幅も自動的に調整されるようになります．この方法を使って Web ページの上部にカバーイメージを表示することができるようになります．（詳細はこちら）

index.html（抜粋）コピー
<p>
  <img src="eye-02.jpg" class="img-fluid" alt="eye-02">
</p>

次のページでは複数のカバーイメージを自動的に切り替えるカルーセルを作成します．

目次に戻る