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

Other Frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

• Angular Image
• Bootstrap Image
• Vue Image

Responsive images#

Images in CoreUI for React.js are made responsive withfluid property. This appliesmax-width: 100%; andheight: auto; to the image so that it scales with the parent element.

JavaScriptTypeScript

Image thumbnails#

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

JavaScriptTypeScript

Aligning images#

Align images with thealign property.

JavaScriptTypeScript

JavaScriptTypeScript

JavaScriptTypeScript

API#

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

• <CImage />