導入方法などについては下記参照
通常の画像表示方法
imgタグとsrc属性を使って画像を表示します。画像サイズは、画像のサイズをそのまま表示します。
<img src=”https://tkstock.site/wp-content/uploads/2023/04/f2e5dc54-7005-4e5a-8587-5bc7e90e8777.png” alt=”サンプル画像”>
bootstrapでの画像表示
画像の大きさを自動調整する
クラス属性に「img-responsive」を指定することで、画面のサイズに合わせて画像の大きさが自動的に調整されます。レスポンシブデザインを実現するために、重要な機能となっています。
<img src=”https://tkstock.site/wp-content/uploads/2023/04/f2e5dc54-7005-4e5a-8587-5bc7e90e8777.png” alt=”サンプル画像” class=”img-responsive”>
画像に枠線をつける
クラス属性に「img-thumbnail」を指定することで、画像に枠線をつけることができます。スタイリッシュなデザインにする場合には、必須の機能となっています。
<img src=”img/sample.jpg” alt=”サンプル画像” class=”img-thumbnail”>
まとめ
上記のコードをまとめると以下のようになります
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>BOOTSTRAP画像の表示方法</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<h1>BOOTSTRAP画像の表示方法</h1>
<p>通常の画像表示方法</p>
<img src=”https://tkstock.site/wp-content/uploads/2023/04/f2e5dc54-7005-4e5a-8587-5bc7e90e8777.png” alt=”サンプル画像”>
<p>画像の大きさを調整する</p>
<img src=”https://tkstock.site/wp-content/uploads/2023/04/f2e5dc54-7005-4e5a-8587-5bc7e90e8777.png” alt=”サンプル画像” class=”img-responsive”>
<p>画像に枠線をつける</p>
<img src=”https://tkstock.site/wp-content/uploads/2023/04/f2e5dc54-7005-4e5a-8587-5bc7e90e8777.png” alt=”サンプル画像” class=”img-thumbnail”>
</div>
</body>
</html>
以上が、BOOTSTRAPを使った画像の表示方法についての説明となります。初心者にもわかりやすく、実際のプログラムにも役立つ内容です。ぜひ、今後のWebデザインに活かしてください。
公式ドキュメント：https://getbootstrap.jp/docs/5.0/content/images/
コメント
[…] 関連記事：【Bootstrap】レスポンシブな画像を表示する方法のまとめ […]
[…] 関連記事：【Bootstrap】レスポンシブな画像を表示する方法のまとめ […]
[…] 関連記事：【Bootstrap】画像を画面幅に合わせてレスポンシブに表示する方法 […]