| Prop | Type | Default | Definition | | --- | --- | --- | --- | | sources | array | | The array of source objects. Check Sources section for more information. | | src | string | (transparent pixel) | Source for standalone/fallback image. To prevent issues in some browsers, by default src is set to a 1x1 transparent pixel data image. | | sizes | string | | Sizes attribute to be used with src for determing best image for user's viewport. | | alt | string | | Alternative text for image | | className | string | | Any additional CSS classes you might want to use to style the image |
Examples
$3
Normal like behaviour. The same image is displayed on every device/viewport.`jsx `
will render:
`html `
$3
Different images for specific devices (usually retina).`jsx `
will render:
`html `
$3
When you want to let the browser determine the best image for user's current viewport. More information about size attribute on this great blog post.`jsx src="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" /> `
will render:
`html `
$3
When you want to explicitly control which image is displayed at specific viewport sizes.`jsx sources = {[ { srcSet: "path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x", media: "(max-width: 420px)", }, { srcSet: "path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x", }, { srcSet: "path-to-desktop-image.webp", type: "image/webp" } ]} /> `
will render:
`html
`
The
sources prop is where you can determine the behaviour of the component and which images will show for the specific screens.
For each source you can send an object containing
srcSet, media and type although the last two are optional.
$3
You can use your favourite styling library and style the
Picture component using the className prop.`jsx import { css } from "emotion";
It will automatically fill the parent element maintaining the original image ratio. Please note that the parent element needs to have a defined height as you would expect for any background image as well.
$3
FullsizePicture accepts the same props as Picture plus a few more for styling and positioning.
| Prop | Type | Default | Definition | | --- | --- | --- | --- | | sources | array | | The array of source objects. Check Sources section for more information. | | src | string | (transparent pixel) | Source for standalone/fallback image. To prevent issues in some browsers, by default
src is set to a 1x1 transparent pixel data image. | | sizes | string | | Sizes attribute to be used with src for determing best image for user's viewport. | | alt | string | | Alternative text for image | | className | string | | Any additional CSS classes you might want to use to style the image | | wrapperClassName | string | | Any additional CSS classes you might want to use to style the wrapper of the Picture component | | cover | "both" \| "width" \| "height" | "both" | Decides the fullsize behaviour of the Picture component. By default it covers the entire parent, but can be changed to cover just the height or width instead. | | center | boolean | true | Helper prop to horizontally and vertically center the image. |
$3
If you want to use
FullsizePicture as a background image for other components, you can pass them as children too.`jsx sources = {[ { srcSet: "path-to-mobile-image.jpg, path-to-mobile-image@2x.jpg 2x", media: "(max-width: 420px)", }, { srcSet: "path-to-desktop-image.jpg 1x, path-to-desktop-image@2x.jpg 2x", }, ]} > This is the section title
