Is your feature request related to a problem? Please describe.
Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):

Describe the solution you'd like
A common trick is to apply a style to the image like this (potentially in the X-direction, too):
position: "relative",
top: "50%",
transform: "translateY(-50%)"
...
However, this should only be applied to the
node. I propose to introduce loadedImageProps which are then spread to the image in getImg:
// ...
return <img onLoad={this.onImageLoad()} {...imgProps} {...loadedImageProps} />;
which can be used like
<LazyLoadImage
loadedImageProps={{ className: classes.imagePositionHack }}
// ...
/>
Describe alternatives you've considered
Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple className for the img component could be an option, similar to material-ui allows styling of children, e.g. <LazyLoad classes={{ img: myImgClassName }} ... />.
I can send a pull request in the day.
Is your feature request related to a problem? Please describe.
Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):
Describe the solution you'd like
A common trick is to apply a style to the image like this (potentially in the X-direction, too):
However, this should only be applied to the
node. I propose to introduce
loadedImagePropswhich are then spread to the image ingetImg:which can be used like
Describe alternatives you've considered
Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple
classNamefor the img component could be an option, similar to material-ui allows styling of children, e.g.<LazyLoad classes={{ img: myImgClassName }} ... />.I can send a pull request in the day.