ブートストラップに写真を挿入する方法

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。 Bootstrap画像コンポーネントを使用すると、レスポンシブ画像やより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップに画像を挿入する方法

写真を直接挿入します

Bootstrapでは、HTML imgタグを使用して画像を直接挿入できます。

 <code class="html"><img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="ブートストラップに写真を挿入する方法"></code>

ブートストラップ画像コンポーネントを使用します

Bootstrapは、応答性の高い画像を提供し、境界、丸い角、影、その他のスタイルを設定できる画像コンポーネントを提供します。

 <code class="html"><div class="img-container"> <img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="ブートストラップに写真を挿入する方法"> </div></code>

画像サイズを設定します

img-fluidクラスを使用して、さまざまなデバイスと画面サイズで画像を応答的にスケーリングします。

 <code class="html"><img class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="ブートストラップに写真を挿入する方法"></code>

境界を設定します

img-borderedクラスを使用して、画像に境界線を追加できます。

 <code class="html"><img class="img-bordered lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="ブートストラップに写真を挿入する方法"></code>

丸い角をセットします

img-roundedクラスを使用して、画像に丸い角を追加できます。

 <code class="html"><img class="img-rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="ブートストラップに写真を挿入する方法"></code>

影を設定します

shadowクラスを使用して、画像に影を追加できます。

 <code class="html"><img class="shadow lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="ブートストラップに写真を挿入する方法"></code>

サイズを変更して画像を配置します

CSSスタイルを使用して、画像をサイズ変更して配置できます。

 <code class="css">img { width: 50%; float: left; }</code>

背景画像を使用します

background-image CSSプロパティを使用して、バックグラウンドイメージCSSプロパティを使用できます。

 <code class="css">.my-class { background-image: url("image.jpg"); }</code>

以上がブートストラップに写真を挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。