` width some `width` and `height` and inside the ``. The `` will occupy the full width and height of the parent `

`. It will render the image in Fit or Fill mode. The `

`'s `width` and `height` would also be obtained by `flex boxes` or `grid system`. ### Modes The `EImageMode` would be: #### FIT In Fit mode, the image will fit in the parent div, which means that we will have horizontal or vertical empty spaces. #### FILL In Fill mode, the image will cover the whole area of the parent div, which means that the image will be cropped vertically or horizontally. ### Examples ``` import {DynaImage, EImageMode} from "dyna-image"; ...

``` or ```

``` ### Props Render image in Fit or Fill mode. ``` IDynaImageProps { className?: string; style?: React.CSSProperties; // Container's style imgStyle?: React.CSSProperties; // Image style (is div with background image) src: string; mode?: EImageMode; // Default: EImageMode.FIT alt?: string; content?: JSX.Element; showLoadingSpinner?: boolean; // Default is false showBrokenImageOnFail?: boolean; // Default is true crop?: { percentageX1: number; // 0..100 position percentageY1: number; // 0..100 position percentageX2: number; // 0..100 position percentageY2: number; // 0..100 position }; horizontalMirror?: boolean; verticalMirror?: boolean; blackAndWhite?: boolean; onLoad?: () => void; onError?: (error: any) => void; } ``` #### `content` property Allows rendering above the image. The container has the entire width and height of the image. #### `showLoadingSpinner` property On loading, it shows the Material UI CircularProgress animated icon. #### `showBrokenImageOnFail` property On failed load, it shows the Material UI BrokenImage icon. ## DynaResponsiveImage ### Props ``` IDynaResponsiveImageProps { className?: string; imgStyle?: React.CSSProperties; // Image style (is div with background image) srcSet: { main: string; // Use it as default image W192?: string; W384?: string; W768?: string; W1024?: string; W2048?: string; W4096?: string; }; alt?: string; content?: JSX.Element; horizontalMirror?: boolean; verticalMirror?: boolean; blackAndWhite?: boolean; zoom?: { percentageX: number; // Default is 50%. Examples: 0& 20% 100% percentageY: number; // Default is 50%. Examples: 0& 20% 100% zoom: number; // Default is 1. 1 1.2 1.5 }; onLoad?: () => void; onError?: (error: any) => void; } ``` ### `srcSet` property Main is required, but all other resolutions are optional. ### `content` property Allows rendering above the image. The container has the full width and height. ### `content` property Allows zooming into the image on a specific point on the picture by percentage x/y. This has a crop effect. # Change log ## 1.2.3 - First version. - Works with React 16 ## 2.0.0 - Works with React 17 ## 3.0.0 - Change: ``'s `ACTUAL` mode is omitted. - New: `` SEO friendly and supports multiple responsive image versions. ## 4.0.0 - Switch to React V18 --- _Source: https://npm.io/package/dyna-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._