in English
画像
画像をレスポンシブな動作にする (親要素より大きくならないようにする) ためのドキュメントと例、およびそれらに軽量スタイルを追加する方法 (すべてクラスを使用)。
このページでは
レスポンシブ画像
Bootstrap の画像は、.img-fluid
. これは画像に適用さmax-width: 100%;
れheight: auto;
、親要素に合わせて拡大/縮小されます。
<img src="..." class="img-fluid" alt="...">
画像のサムネイル
border-radius ユーティリティに加えて、 を使用.img-thumbnail
して、画像に丸みを帯びた 1px の境界線の外観を与えることができます。
<img src="..." class="img-thumbnail" alt="...">
画像の位置合わせ
ヘルパー フロート クラスまたはテキスト配置クラスを使用して画像を配置します。レベルの画像は、margin ユーティリティ クラスblock
を使用して中央に配置できます。.mx-auto
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>
サス
変数
画像のサムネイルには変数を使用できます。
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;