Images (イメージ)
レスポンシブな画像とクラスの適用についての例です。
On this page
Responsive images
画像をレスポンシブにするには .img-fluid
を使用します。 max-width: 100%;
, height: auto;
を適用すると親要素に比例するレスポンシブが実現出来ます。
<img src="..." class="img-fluid" alt="...">
Image thumbnails
border-radius utilities に加えて, .img-thumbnail
を適用すると境界線(1ピクセル分)に丸みを持たせることができます。
<img src="..." class="img-thumbnail" alt="...">
Aligning images
画像のアライメントは helper float classes と text alignment classes を参考にしてください。 block
レベルでは画像は真ん中に配置されます。 the .mx-auto
margin utility class.
<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
<picture>
要素を使用して, 複数の <source>
要素を <img>
タグの為に使用する際は, .img-*
クラスを <picture>
タグではなく, <img>
タグに適用して下さい。
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Sass
Variables
Variables are available for image thumbnails.
$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;