/react-image-autofit-frame

React component displaying image that always fits its frame, regardless of size, orientation (portrait or landscape) while keeping original ratio

Primary LanguageJavaScriptMIT LicenseMIT

react-image-autofit-frame

React component displaying image that always fits its frame, regardless of size, orientation (portrait or landscape) while keeping original ratio

Install

npm install --save react-image-autofit-frame

Usage

Example

import AutoFitImage from 'react-image-autofit-frame';

class MyApp extends React.Component {
    render() {
    	// The frame's width and height should be pre-defined, sometimes inheriting from parent's CSS (using %) is still fine
    	// You can also use "style" attribute to apply on the component
        return (
            <AutoFitImage frameWidth="500px" frameHeight="400px" imgSrc="https://dummyimage.com/600x400/00ffee/fff" style={{/*..your style here..*/}}/>
        );
    }
}

Props

  • imgSrc: String - Your image source, either absolute or relative path, or URL
  • frameWidth: String (default: "100%") - Width of the frame for your image, it is string because you can use either "500px" or "100%" - inherits from its parent-DOM
  • frameHeight: String (default: "100%") - Same as frameWidth, you can also use either "px" or "%" here. however, it is recommended to use height here to make sure the frame’s height will not be 0px
  • positionX: String (VALUES: "left"/"center"/"right", DEFAULT: "center") - which part of image (X-axis) will be focused and displayed
  • positionY: String (VALUES: "top"/"center"/"bottom", DEFAULT: "center") - which part of image (Y-axis) will be focused and displayed
  • keepOriginalImgSize: Boolean (default: "false")
    • If this is set to false: either the width or the height [the bigger dimension] of image will be scaled down/up to fit with the frame, the other dimension will depend on positionX and positionY below -
    • If this is set to true: use original image size, no scaling, and the below imgSize props will not take effect!
  • imgSize: String (VALUES: "cover"/"contain", DEFAULT: "cover") - This is just like background-size's value
    • "cover" means: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
    • "contain" means: Scale the image to the largest size such that both its width and its height can fit inside the content area

Thank you

License

MIT