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

藏色散人
リリース: 2019-07-20 11:33:07
オリジナル
5567 人が閲覧しました

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

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

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

<img src="..." class="img-responsive center-block" >
ログイン後にコピー

コンテンツ ページ内にある場合は、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート