Bootstrapには、畫像クラス（IMG-Fluidなど）を使用してレスポンシブ畫像スケーリングを?qū)g現(xiàn)するという5つの一般的な方法があります。ユーティリティ（w-、mx-、丸みを帯びた*など）を使用して、畫像スタイルを柔軟にカスタマイズします。メディアオブジェクトを使用して、畫像とテキストを揃えます。畫像グループを使用して、レスポンシブサムネイルセットを作成します。畫像のプレースホルダーを使用して、畫像がロードされる前に代替コンテンツを表示します。

ブートストラップを使用して畫像をセットアップする方法

Bootstrapは、多くのクラスとユーティリティを提供して、畫像をWebページにスタイリングして配置するのに役立ちます。寫真を設(shè)定するには、次の方法のいずれかを使用できます。

1.畫像クラスを使用します

<img  class="img-fluid lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="ブートストラップで畫像をセットアップする方法" >

• img-fluidクラスは、レスポンシブな畫像スタイルを適用して、すべてのビューポートサイズで自動(dòng)的にサイズ変更および流動(dòng)的です。

2。ユーティリティを使用します

畫像クラスに加えて、Bootstrapは次のユーティリティも提供します。

• w-* ：たとえば、畫像の幅を設(shè)定します： w-25 （25％幅）、 w-50 （幅50％）。
• mx-*およびmy-* ：畫像の左と右と上下のマージンを設(shè)定します。たとえば、 mx-auto （水平に中心）。
• 丸みを帯びroundedとrounded-* ：たとえば、畫像に丸い角を追加します： rounded-circle 。

 <code class="html"><img  class="w-50 mx-auto rounded lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="ブートストラップで畫像をセットアップする方法" ></code>

3.メディアオブジェクトを使用します

• メディアオブジェクトを使用すると、畫像をテキストまたは他の要素に合わせてください。

   <code class="html"><div class="media"> <img  class="mr-3 lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="ブートストラップで畫像をセットアップする方法" > <div class="media-body"> <p>圖像描述...</p> </div> </div></code>

4.畫像グループを使用します

• 畫像グループを使用すると、応答性の高いサムネイルセットを作成できます。

   <code class="html"><div class="row"> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="ブートストラップで畫像をセットアップする方法" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="ブートストラップで畫像をセットアップする方法" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="ブートストラップで畫像をセットアップする方法" > </div> </div></code>

5。畫像プレースホルダー

• 畫像プレースホルダーは、畫像がロードされる前に代替コンテンツを表示するために使用されます。

   <code class="html"><img class="img-fluid lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="Responsive image"> <div class="placeholder-glow"> <span class="placeholder col-12"></span> </div></code>

  これらの方法を使用することで、Bootstrapを使用して畫像を簡(jiǎn)単に設(shè)定してスタイルを設(shè)定して、美しくレスポンシブなWebページを作成できます。

  以上がブートストラップで畫像をセットアップする方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。