GitHubで表示

画像

レスポンシブな振る舞いを画像に適用する（親要素よりも大きくなることはありません）ためのドキュメントと例。また、クラスを使用して軽量なスタイルを追加できます。

レスポンシブ画像

Bootstrapの画像は.img-fluidで応答します。 max-width: 100%;とheight: auto; が画像に適用され、親要素に合わせて拡大縮小されます。

PlaceholderResponsive image 
<img src="..." class="img-fluid" alt="...">
Internet ExplorerのSVG画像

Internet Explorer 10と11では、.img-fluidのSVG画像は不均衡なサイズになります。これを修正するには、必要に応じてwidth: 100%; または.w-100を追加します。この修正では、他の画像形式のサイズが不正になるので、Bootstrapは自動的に適用しません。

画像サムネイル

Bootstrapの境界半径ユーティリティに加えて、.img-thumbnailを使用すると、画像に丸みを帯びた1pxの境界線を作成できます。

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200 
<img src="..." class="img-thumbnail" alt="...">

画像の配置

ヘルパーフロートクラスまたはテキスト配置クラスを使用して画像を配置します。 blockレベルの画像には、.mx-autoマージンユーティリティクラスを使用して中央に配置できます。

Placeholder200x200 Placeholder200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

絵

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

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