# Vue Image Component

> Vue image component with responsive behavior (so it's never become larger than their parent element) and special styles.

## Responsive images

Images in CoreUI for Vue.js are made responsive with `fluid` property. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.

```html
<template>
  <CImage fluid src="/images/vue.jpg" />
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>
```
  
</Example>

## Image thumbnails

In addition to our [border-radius utilities](https://coreui.io/docs/4.0/utilities/borders), you can use prop`thumbnail` to give an image a rounded 1px border appearance.

```html
<template>
  <CImage rounded thumbnail src="/images/vue400.jpg" width="200" height="200" />
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>
```
  
</Example>

## Aligning images

Align images with the `align` property.

```html
<template>
  <div class="clearfix">
    <CImage align="start" rounded src="/images/vue400.jpg" width="200" height="200" />
    <CImage align="end" rounded src="/images/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <div class="clearfix">
    <CImage align="center" rounded src="/images/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <div class="text-center">
    <CImage rounded src="/images/vue400.jpg" width="200" height="200" />
  </div>
</template>

<script setup>
import { CImage } from '@coreui/vue'
</script>
```
  
</Example>