ブートストラップ応答性イメージを実装する方法に関する簡単な説明

この記事では、bootstrapレスポンシブ画像を実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「bootstrap チュートリアル 」

プロジェクト アプリケーションにおけるレスポンシブ イメージの 2 つの一般的な形式:

は、画面サイズが変更され、それに応じて画像のレイアウトが変更されます。 PC とモバイル デバイス間の変換に適応するために、2 セットの画像リソースが使用されます。

1: 画面サイズが変更され、それに応じて画像レイアウトも変更されます

<div>
       <div>
           <div>
               <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/box-logo.png" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
           </div>
           <div>
            <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/google-logo.png" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/intuit-logo.png" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/square-logo.png" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
            </div>
        </div>
   </div>

効果:

1. デスクトップ画像よりも大きい (>996px)

2. タブレット (>768px
3. 携帯電話 (
2: に適応するためPC とモバイル デバイス間の変換、2 セットの画像リソースの使用

<div>
       <img  class="visible-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
       <img  class="hidden-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="ブートストラップ応答性イメージを実装する方法に関する簡単な説明" >
   </div>

2 セットの画像リソースは、ページの遅延を防ぎ、トラフィックを節約するのに役立ちます。

プログラミング関連の知識について詳しくは、プログラミング教育をご覧ください。 ！

以上がブートストラップ応答性イメージを実装する方法に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。