画像

レスポンシブビヘイビアを選択するためのドキュメントと例（つまり、親要素より大きくならないようにする）および軽量スタイルを追加するためのすべてのクラス。

レスポンシブ画像

Bootstrap内の画像は .img-fluidで反応します。 max-width：100％;と height：auto;は画像が親要素に合わせて拡大縮小されるように適用されます。

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

インターネットエクスプローラ 10では、 .img-fluidの付いたSVG画像はサイズが大きくなりすぎます。これを修正するには、必要に応じて width：100％\ 9;を追加してください。この修正では他の画像フォーマットのサイズが不適切になるため、Bootstrapは自動的には適用しません。

画像のサムネイル

[border-radiusユーティリティ]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / borders /）に加えて、画像に丸みを付けるために .img-thumbnailを使うことができます。 1pxボーダーアピアランス。

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

画像を揃える

画像を[ヘルパーフロートクラス]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / float）または[テキスト配置クラス]（{{site.baseurl}} / docs / {）に合わせます。 {site.docs_version}} / utilities / text /＃text-alignment）。ブロックレベルの画像は[.mx-autoマージンユーティリティクラス]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / spacing /＃horizo​​ntal-centering）を使って中央揃えできます。 。

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

画像

特定の <img>に対して複数の <source>要素を指定するために <picture>要素を使用している場合は、 .img- *クラスを <img>に追加してください。 タグへ。

​<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>