ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > ブートストラップを使用して画像を適応させる方法

ブートストラップを使用して画像を適応させる方法

リリース: 2019-07-12 08:59:14
オリジナル
4354 人が閲覧しました

ブートストラップを使用して画像を適応させる方法

画像をアダプティブにするブートストラップ メソッド:

1. ページに画像を挿入する場合は、 class="img-sensitive"
< を追加するだけです。 ;img src="..." class="img-sensitive center-block" >

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

$(".setting img").addClass("img-sensitive center-block"); //center-block 画像は水平方向に中央揃えになります

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

Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。

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

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