Images
Basic example
Images in React can be responsive and/or wrapped in a link.
ReferenceError: React is not defined
Responsive
Images can be made responsive-friendly via the addition of the .img-responsive
class. This applies max-width: 100%;
and height: auto;
to the image so that it scales nicely to the parent element.
ReferenceError: React is not defined
Responsive SVG
SVG can be made responsive-friendly via the addition of the .svg-responsive
class on a
wrapper div and the .svg-content
class on the svg itself. You'll also need to to define
the height to width ratio as an inline padding bottom style on the .svg-responsive
element like so:
<div class="svg-responsive" style="padding-bottom: 78.31%">
<svg class="svg-content" viewBox="38 45 125 120" preserveAspectRatio="xMinYMin meet">
...
</svg>
</div>
Custom SVG
ReferenceError: React is not defined
Props
Property | Required | Type | Default | Description |
---|---|---|---|---|
alt | no | String | Alt text | |
href | no | String | If set, image becomes a link | |
responsive | no | Boolean | false | Whether this image should resize responsively |
src | yes | String | Image src |
Imports
Import React components (including CSS):
import {Image} from 'pivotal-ui/react/images';
Import CSS only:
import 'pivotal-ui/css/images';