• レスポンシブ・イメージ
• イメージ形状

レスポンシブ・イメージ

Bootstrap3の画像は、.img-responsiveクラスを追加することでレスポンシブ-フレンドリーにすることが可能です。 これは、画像にmax-width: 100%;、height: auto;、display: block;を適用するため、 親要素に合わせて縮尺されます。

.img-responsiveクラスを使用した画像を中央に配置するには、 .text-centerの代わりに.center-blockを使用してください。 .center-blockの使用方法の詳細については、ヘルパークラスのセクションを参照してください。

SVG画像とIE8～10について
Internet Explorerの8～10では、.img-responsiveが指定されたSVG画像は不釣合いなサイズになります。 これを修正するには、必要な箇所にwidth: 100% \9;を追加します。 他の画像フォーマットで問題を複雑化するため、Bootstrapはこれを自動的に適用しません。

<img src="..." class="img-responsive" alt="Responsive image">

イメージ形状

<img>要素にクラスを追加することで、簡単にプロジェクトの画像のスタイル(形状)を変更することができます。

クロスブラウザの互換性
IE8では角丸がサポートされていないことに注意してください。

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

 Back to top