Inline CSS is stretching images

[Alfrex92]

Hi, in our company we have been using your library and it is working perfectly.

However, we noticed that the inline CSS is stretching the images.

We wrote the css that you need to add in order to avoid this problem.

So, instead of using this

position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

You need to 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);

Then, the image looks better.

You can see a live version of the technique here: Mipon

In case that you prefer keep using the same CSS, is it possible that we can add our own css to the img?

You can check this library as a reference:
reactjs/react-tabs#148

The logic is the same, but the library allows to customize the CSS using StyledComponents.

Thanks! have a great weekend.

[bluebill1049]

hey,

can you try with applyAspectRatio?

[Alfrex92]

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

[bluebill1049]

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.

[Alfrex92]

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

[bluebill1049]

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

[bluebill1049]

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

you can try with imgStyle

[Alfrex92]

Hi, thanks for adding the new feature.

How can I use it?

like this?

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

[bluebill1049]

Yes

[Alfrex92]

It's not working :S

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

[bluebill1049]

https://codesandbox.io/s/lazyloadingsimplereactimg-zpcvg
fixed
react-simple-img@2.3.1

[bluebill1049]

Hey,

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

thanks
bill

[oquirozm]

@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?

[bluebill1049]

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

[oquirozm]

@bluebill1049 sure, will do in a bit