イメージ

レスポンシブな画像とクラスの適用についての例です。

Responsive images

画像をレスポンシブにするには fluid 属性を使用します。

Responsive image
vue
<template>
 <b-img
  src="https://dummyimage.com/600x250/787878/ffffff&text=Responsive+image"
  fluid
  relative-width="100"
  alt="Responsive image"
 />
</template>

Image thumbnails

border-radius utilities に加えて, thumbnail 属性を適用すると境界線(1ピクセル分)に丸みを持たせることができます。

200x200
vue
<template>
 <b-img
  src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
  thumbnail
  alt="200x200"
 />
</template>

Aligning images

画像のアライメントは helper float classes と text alignment classes を参考にしてください。

block レベルでは画像は真ん中に配置されます。

200x200200x200
vue
<template>
 <b-div clearfix>
  <b-img
   src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
   rounded
   float="start"
   alt="200x200"
  />
  <b-img
   src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
   rounded
   float="end"
   alt="200x200"
  />
 </b-div>
</template>
200x200
vue
<template>
 <b-img
  src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
  rounded
  display="block"
  margin="x-auto"
  alt="200x200"
 />
</template>
200x200
vue
<template>
 <b-div text-alignment="center">
  <b-img
   src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
   rounded
   alt="200x200"
  />
 </b-div>
</template>
...
vue
<template>
 <BPicture
  src="https://dummyimage.com/200x200/787878/ffffff&text=200x50"
  fluid
  thumbnail
  alt="..."
 >
  <source
   srcset="
        https://dummyimage.com/200x50/787878/ffffff&text=200x50-1x   1x,
        https://dummyimage.com/400x100/787878/ffffff&text=400x100-2x 2x,
        https://dummyimage.com/600x150/787878/ffffff&text=600x150-3x 3x,
        https://dummyimage.com/800x200/787878/ffffff&text=800x200-4x 4x
      "
   type="image/svg+xml"
  />
 </BPicture>
</template>

picture コンポーネントに`srcset 属性を設定することで、<source> 要素を省略できます。

...
vue
<template>
 <BPicture
  src="https://dummyimage.com/200x200/787878/ffffff&text=200x50"
  srcset="https://dummyimage.com/200x50/787878/ffffff&text=200x50-1x 1x, https://dummyimage.com/400x100/787878/ffffff&text=400x100-2x 2x, https://dummyimage.com/600x150/787878/ffffff&text=600x150-3x 3x, https://dummyimage.com/800x200/787878/ffffff&text=800x200-4x 4x"
  fluid
  thumbnail
  alt="..."
 />
</template>

See Also