Images
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>
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';