記事内に広告が含まれています。

Bootstrap: img-fluid による画像のレスポンシブ対応

2023年7月8日

Bootstrap では、img-fluid クラスを適用することで、画像のレスポンシブ対応を行うことができます。

実装例

<img src="./image.PNG" alt="" class="img-fluid">

サンプルダウンロード

サンプル内の img タグの src プロパティに、適宜画像を指定ください。その後、サンプルをブラウザで実行していただき、ブラウザをリサイズすることで、画像がレスポンシブにサイズ変更されることが分かります。

参考リンク

https://getbootstrap.com/docs/5.0/content/images/#responsive-images

Bootstrap 学習おすすめの書籍

Bootstrap の網羅的な学習には、Bootstrap 5 フロントエンド開発の教科書がおすすめです。Bootstrap のクラス、レスポンシブレイアウトの仕組み、Bootstrap アイコン、テーマなど様々な機能が紹介されています。Bootstrap の機能を幅広く学習することができまです。

-CSS