Pictures are always difficult to handle in web page, especially in a responsive way. A well-known workaround is to style the img tag with something like this:
This method works well, but there is a lot of cases where it's not sufficient. Fortunately CSS introduced some times ago the "object-fit" property, improving the way we can handle image displaying. The current component provides an easy react binding to display images with object-fit property.
In addition, you can provide a loader which will be displayed during the image processing by the browser.
Object-fit is well supported by browsers but not all of them for now ( see Caniuse ). To work on stuffs like IE, a basic test is done with CSS.supports to provide a fallback based on "background" CSS property.
npm install --save react-fitted-image
|background||bool||Force the component to use the CSS bacground properties||false||no|
|className||string||Custom classname for the component||_||no|
|fit||string||Value of the object-fit property. Can be "auto", "contain", or "cover"||"auto"||no|
|loader||element||Component to use as loader||_||no|
|onLoad||function||Success callback for image loading||_||no|
|onError||function||Error callback for image loading||_||no|
|src||string||Image url to render||_||yes|
<FittedImagefit="contain"loader=<div>Loading</div>onLoad= consoleonError= consolesrc="public/img.jpg"/>