sw-Caption
/src/assets/css/namespace/sitewide/_Caption.scss
画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
ベーシックなスタイルです。
.l-Wrapper
figure.sw-Caption
img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
figcaption.sw-Caption_Text 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
sw-Caption.-center
/src/assets/css/namespace/sitewide/_Caption.scss
.-centerでキャプションをセンタリングします。
.l-Wrapper
figure.sw-Caption.-center
img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
figcaption.sw-Caption_Text 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
sw-Caption_Text.-center
/src/assets/css/namespace/sitewide/_Caption.scss
.-centerでキャプションをセンタリングします。
.l-Wrapper
figure.sw-Caption
img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
figcaption.sw-Caption_Text.-center 画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
sw-Caption_Text.-right
/src/assets/css/namespace/sitewide/_Caption.scss
.-rightでキャプションを右揃えにします。
.l-Wrapper
figure.sw-Caption
img.sw-Caption_Image(src="https://placehold.jp/300x200.png" alt="")
figcaption.sw-Caption_Text.-right画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。
sw-ImageCenter
/src/assets/css/namespace/sitewide/_ImageCenter.scss
画像をセンタリングします。
.l-Wrapper
p.sw-ImageCenter
img(src="https://placehold.jp/300x200.png" alt="")
sw-ObjectFit
/src/assets/css/namespace/sitewide/_ObjectFit.scss
置換要素（img、video、picture、srcsetタグなど）を親要素のサイズに応じてトリミングや拡大縮小をして表示します。
ポリフィルは「object-fit-polyfill」を使用しています。
object-positionはvariantで変更できます（デフォルトは50% 50%）。
Usageにもある通り、data-object-position="center top"のようにカスタムデータ属性でも設定が必要です。
指定順はクラス名とカスタムデータ属性値ともにX軸 Y軸です。
| クラス名 | X軸 | Y軸 |
|---|---|---|
.-leftTop |
left | top |
.-centerTop |
center | top |
.-rightTop |
right | top |
.-leftCenter |
left | center |
.-centerCenter |
center | center |
.-rightCenter |
right | center |
.-leftBottom |
left | bottom |
.-centerBottom |
center | bottom |
.-rightBottom |
right | bottom |
.l-Flex
.l-Flex_Item(class="-1/2" style="height: 200px;")
img.sw-ObjectFit(src="https://unsplash.it/800/600/" alt data-object-fit="cover")
.l-Flex_Item(class="-1/2" style="height: 200px;")
img.sw-ObjectFit(src="https://unsplash.it/400/600/" alt data-object-fit="contain")
.l-Flex_Item(class="-1/2" style="height: 200px;")
img.sw-ObjectFit.-centerTop(src="https://unsplash.it/600/400/" alt data-object-fit="none" data-object-position="center top")
.l-Flex_Item(class="-1/2" style="height: 200px;")
img.sw-ObjectFit(src="https://unsplash.it/600/200/" alt data-object-fit="scale-down")