新規作成日 2017-01-11
最終更新日
原文:Images
(親要素より大きくなることはない)レスポンシブ動作する画像を選ぶためのドキュメントと例と、それらに、すべてクラス経由で、軽量のスタイルを追加します。
レスポンシブ画像
Bootstrapの画像は、.img-fluidでレスポンシブで作成されます。max-width: 100%;とheight: auto;は、画像に適用されるため、それは、親要素に縮尺を合わせます。
<img src="..." class="img-fluid" alt="Responsive image">
SVG画像とIE 10
SVG images and IE 10
Internet Explorer 10では、.img-fluidが付いたSVG画像は、不釣合いに大きさを決められます。これを修正するために、必要な場所に、width: 100% \9; を追加します。この修正により、他の画像フォーマットのサイズが不適切になります。それで、Bootstrapは、自動的に、それを適用しません。
画像のサムネイル
私たちのborder-radiusユーティリティに加えて、あなたは、画像に角の丸い1pxの枠の外観を与えるために、.img-thumbnailを使用することができます。
<img src="..." alt="..." class="img-thumbnail">
イメージを整列させる
ヘルパー・フロート・クラスやテキストの整列クラスで画像を整列させます。ブロック・レベルの画像は、.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>
画像
あなたが、特定の<img>のための複数の<source>要素を指定するために、<picture>要素を使用している場合、.img-* クラスを、<picture>タグにではなく<img>に追加している事を確認して下さい。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>