pocotan001/super-image

React component that render a image with object-fit and its fallback

SuperImage

React component that render the HTML <img> or <picture> with object-fit and its fallback

Install

$ npm install --save super-image

This package use Object.assign(), so you may need to polyfill via object.assign.

Usage

<SuperImage
  src="image.png"
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

// Use <picture> element
<SuperImage
  src="image.png"
  sources={[{ srcSet : 'image@2X.png 2x' }]}
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

// Use fallback for object fit
<SuperImage
  fitFallback
  src="image.png"
  width="160"
  height="90"
  alt="super-image"
  fit="contain"
/>

Config

Property	Type	Description	Default value	Required
src	String	Image url	-	Yes
sources	Array	Sets of <source> element attributes: srcSet, sizes, media and type	[]	No
width	DOMString	Image width	-	No
height	DOMString	Image height	-	No
alt	String	Alternative text for <img> element	""	No
className	String	className property for component	""	No
flexible	Boolean	If true, component size will not be fixed	false	No
fit	String	Value for object-fit property: contain or cover	-	No
fitFallback	Boolean	Force component to use background-image	false	No

License

MIT © FRESH!