画像
画像をレスポンシブな動作にする (親要素より大きくならないようにする) ためのドキュメントと例、およびそれらに軽量スタイルを追加する方法 (すべてクラスを使用)。
レスポンシブ画像
Bootstrap の画像は、.img-fluid. 親要素に合わせて拡大縮小するように画像に適用されますmax-width: 100%;。height: auto;
<img src="..." class="img-fluid" alt="Responsive image">SVG 画像と IE 10
Internet Explorer 10 では、SVG 画像.img-fluidのサイズが不均衡です。これを修正するには、必要に応じて追加width: 100% \9;します。この修正により、他の画像形式のサイズが不適切になるため、Bootstrap はそれを自動的に適用しません。
画像のサムネイル
border-radius ユーティリティに加えて、 を使用.img-thumbnailして、画像に丸みを帯びた 1px の境界線の外観を与えることができます。
<img src="..." alt="..." class="img-thumbnail">画像の位置合わせ
ヘルパー フロート クラスまたはテキスト配置クラスを使用して画像を配置します。レベルの画像は、margin ユーティリティ クラスblockを使用して中央に配置できます。.mx-auto
<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>複数の<source>要素を指定する場合は、タグではなく にクラスを<img>追加してください。.img-*<img><picture>
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>