ブートストラップで画像を画面に適応させる方法

#ブートストラップはどのようにして画像を画面に適応させますか

#ブートストラップの応答性画像の正しい設定は、画像を追加することです。上の画像 2 つのカテゴリに移動するだけです。

<img  class="img-responsive center-block lazy"  src="/static/imghwm/default1.png"  data-src="..."     alt="ブートストラップで画像を画面に適応させる方法" >

コンテンツ ページ内にある場合は、js を使用して各画像に属性を追加するだけです。

$(window).load(function(){
 
    $(".panel-body img").addClass("img-responsive center-block");
 
})

Bootstrap バージョン 3 では、.img 応答クラスを画像に追加することで、画像は応答性の高いレイアウトをサポートできます。重要なのは、親要素内で画像を適切に拡大縮小できるように、画像の max-width: 100%;、height: auto;、および display: block; 属性を設定することです。

.img 応答クラスを使用して画像を水平方向に中央揃えする必要がある場合は、.text-center の代わりに .center-block クラスを使用してください。

SVG 画像と IE 8 ～ 10

Internet Explorer 8 ～ 10 では、.img 応答に設定された SVG 画像のサイズが不均等に表示されます。この問題を解決するには、問題が発生する場所に width: 100% \9; を追加します。他の画像形式が混乱する可能性があるため、ブートストラップはすべての画像要素に対してこのプロパティを自動的に設定しません。

関連する推奨事項:「

ブートストラップ チュートリアル」

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