React Image Component

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

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.

1<CImage fluid src="/images/react.jpg" />

Image thumbnails#

In addition to our border-radius utilities, you can use propthumbnail to give an image a rounded 1px border appearance.

1<CImage rounded thumbnail src="/images/react400.jpg" width={200} height={200} />

Aligning images#

Align images with the align property.

1<div className="clearfix">
2 <CImage align="start" rounded src="/images/react400.jpg" width={200} height={200} />
3 <CImage align="end" rounded src="/images/react400.jpg" width={200} height={200} />
4</div>
1<div className="clearfix">
2 <CImage align="center" rounded src="/images/react400.jpg" width={200} height={200} />
3</div>
1<div className="text-center">
2 <CImage rounded src="/images/react400.jpg" width={200} height={200} />
3</div>

API#

CImage#

1import { CImage } from '@coreui/react'
2// or
3import CImage from '@coreui/react/src/components/image/CImage'
PropertyDescriptionTypeDefault
alignSet the horizontal aligment.'start' | 'center' | 'end'-
classNameA string of all className you want applied to the component.string-
fluidMake image responsive.boolean-
roundedMake image rounded.boolean-
thumbnailGive an image a rounded 1px border appearance.boolean-