Responsive images
Images in Bootstrap are made responsive with fluid attribute.
vue
<template>
<b-img
src="https://dummyimage.com/600x250/787878/ffffff&text=Responsive+image"
fluid
relative-width="100"
alt="Responsive image"
/>
</template>
Image thumbnails
In addition to our border-radius utilities , you can use thumbnail attribute to give an image a rounded 1px border appearance.
vue
<template>
<b-img
src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
thumbnail
alt="200x200"
/>
</template>
Aligning images
the Horizontal centering margin utility class .
Align images with the helper float classes or text alignment classes .
block -level images can be centered using the Horizontal centering margin utility class .
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>
vue
<template>
<b-img
src="https://dummyimage.com/200x200/787878/ffffff&text=200x200"
rounded
display="block"
margin="x-auto"
alt="200x200"
/>
</template>
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>
If you set the srcset attribute in the picture component, you can omit the <source> element.
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>