---
title: React Image Component
name: Image
description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles.
route: /components/image/
other_frameworks: image
---

## Responsive images

Images in CoreUI for React.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.

<ExampleSnippet component="ImageResponsiveExample" componentName="React Image" />

## Image thumbnails

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

<ExampleSnippet component="ImageThumbnailExample" componentName="React Image" />

## Aligning images

Align images with the `align` property.

<ExampleSnippet component="ImageAligningExample" componentName="React Image" />

<ExampleSnippet component="ImageAligning2Example" componentName="React Image" />

<ExampleSnippet component="ImageAligning3Example" componentName="React Image" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CImage /&gt;](./api/#cimage)