画像

画像をレスポンシブな挙動に（親要素より大きくならないように）したり、ちょっとしたスタイルを適用したりするためのドキュメントとサンプルです。すべてクラス経由です。

レスポンシブな画像

Bootstrap の画像は .img-fluid でレスポンシブにできます。親要素に対応するよう max-width: 100%; および height: auto; が適用されます。

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

SVG 画像と IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

画像のサムネイル

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

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

画像の整列

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

A generic square placeholder image with rounded corners

<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>

picture

If you are using the <picture> element to specify multiple <source> elements for a specific <img>, make sure to add the .img-* classes to the <img> and not to the <picture> tag.

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