Image.mdx

layout	docs
title	Image
description	Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them — all via classes.
group	Components

import { Image } from 'boot-cell/source/Media/Image';

import { Example } from '../../../../source/component/Example';

Responsive images

max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

import { render, createCell } from 'web-cell';
import { Image } from 'boot-cell/source/Media/Image';

render(
    <Image
        fluid
        src="https://tech-query.me/medias/featureimages/6.jpg"
        alt="Responsive image"
    />
);

Image thumbnails

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

import { render, createCell } from 'web-cell';
import { Image } from 'boot-cell/source/Media/Image';

render(
    <Image
        thumbnail
        src="https://web-cell.dev/WebCell-0.a6336415.png"
        alt="Thumbnail image"
    />
);

Background images

import { render, createCell } from 'web-cell';
import { Image } from 'boot-cell/source/Media/Image';

render(
    <Image
        background
        src="https://tech-query.me/medias/featureimages/6.jpg"
        alt="Background image"
    />
);

Figure images

Anytime you need to display a piece of content — like an image with a caption, consider using a <Image caption="" />.

import { render, createCell } from 'web-cell';
import { Image } from 'boot-cell/source/Media/Image';

render(
    <Image
        caption="Figure image"
        alt="Figure image"
        src="https://tech-query.me/medias/featureimages/6.jpg"
    />
);