項目
レスポンシブな画像
画像は、.img-fluid
でレスポンシブに対応します。これは、画像にmax-width: 100%;
とheight: auto;
を適用して、親の幅に合わせて拡大縮小するようにします。
<img src="..." class="img-fluid" alt="...">
サムネイル
border-radiusユーティリティに加え、.img-thumbnail
を使用すると、画像に丸みを帯びた1pxのボーダーを表示させることができます。
<img src="..." class="img-thumbnail" alt="...">
画像の配置を整える
ヘルパーのfloatクラスやテキスト整列クラスを使って画像を整列させます。block
-levelの画像は、.mx-auto
marginユーティリティクラスを使って中央に配置することができる。
<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-*
クラスを<picture>
タグではなく、<img>
タグに適用して下さい。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
CSS
Sass変数
サムネイルに対応した変数が用意されています。
$thumbnail-padding: .25rem;
$thumbnail-bg: var(--#{$prefix}body-bg);
$thumbnail-border-width: var(--#{$prefix}border-width);
$thumbnail-border-color: var(--#{$prefix}border-color);
$thumbnail-border-radius: var(--#{$prefix}border-radius);
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm);