Inline CSS is stretching images about react-simple-img HOT 14 CLOSED

@bluebill1049 sure, will do in a bit

from react-simple-img.

hey,

can you try with applyAspectRatio?

from react-simple-img.

Yes, that's the prop that I'm using.

from react-simple-img.

oh ok, did you supply image width and height when you are using applyAspectRatio? For aspect ratio to work, it required to having image width and height.

Yea, I think I can expose an image style prop, so you can apply your own style.

from react-simple-img.

Thanks for your quick response. Yes, I added the width and height when using applyAspectRatio. The library is working perfect. The CSS is what needs improvement.

You can replace the previous code and add this:

  position: absolute;
    left: -10000%;
    right: -10000%;
    top: -10000%;
    bottom: -10000%;
    margin: auto auto;
    min-width: 1000%;
    min-height: 1000%;
    object-fit:cover;
    -webkit-transform: scale(.1);
    transform: scale(.1);

Yess, it would be awesome if you can expose the style :D

from react-simple-img.

I will expose the style for you, I will work on it this week.

from react-simple-img.

https://github.com/bluebill1049/react-simple-img/releases/tag/v2.3.0

you can try with imgStyle

from react-simple-img.

Hi, thanks for adding the new feature.

How can I use it?

like this?

 <SimpleImg
        src={
          ""
        }
        imgStyle={{
          position: "absolute"
        }}
      />

from react-simple-img.

Yes

from react-simple-img.

It's not working :S

https://codesandbox.io/s/lazyloadingsimplereactimg-58kwy

from react-simple-img.

https://codesandbox.io/s/lazyloadingsimplereactimg-zpcvg
fixed
[email protected]

from react-simple-img.

Hey,

Did you take another look? please close the issue if its resolved

thanks
bill

from react-simple-img.

@bluebill1049 this prop is super useful but I had to search through the issues to find it. Any chance it can be added to the documentation?

from react-simple-img.

sure @oquirozm u want to submit a PR to update readme?

from react-simple-img.