Img width: 100% height: auto about react-simple-img HOT 12 CLOSED

Nice, thanks. 😄

from react-simple-img.

thanks @humbertqz will publish today! thank you for your testing ❤️

from react-simple-img.

v1.14.0 released, i will close the issue. feel free to re-open if you find other issues 👍

from react-simple-img.

The div is made for the placeholder animation, because you have the actual image and placeholder wrapped inside.

There are two solutions:

1. provide img width and height and apply applyAspectRatio
2. i will have to create a minor version, by supply placeholder = false, which will remove placeholder and the wrapping div, plus you will lost the animation from the placeholder.

let me know.

from react-simple-img.

Maybe that could be a feature?

Remove everything but the img tag.

from react-simple-img.

sure i can looking into that over the weekend :) but you lost beautiful animation 👍

from react-simple-img.

Could you please help on testing? [email protected]

you have to set placeholder={false}

from react-simple-img.

Yes!, but i never used a beta repo, how can i download it? I was using the component in a GatsbyJs project.

from react-simple-img.

just yarn add [email protected] or npm i [email protected]. i did testing with my own demo and it works, just want to double check with yours before publishing.

from react-simple-img.

Yes, it works this is my component:

<SimpleImg height={440} src={this.props.imgsrc} placeholder={false} />

This is what is rendered:

<img src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" srcset="" data-placeholder="false" data-src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" height="440" style="transition: all 0.3s ease 0s; opacity: 0; visibility: visible;">

Set the opacity: 0; by default, is there a way to change this?

from react-simple-img.

thanks for the testing! i forgot to set opacity back to 1 for the animation :(

try this version [email protected]

should only render and animate when finished loading

from react-simple-img.

It's working this is the rendered element:

<img src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" srcset="" data-placeholder="false" data-src="/static/thumb-plaza-cataluna-6106ec93376385a64fbf1cd99450ec09.jpg" data-end-style="opacity:0;" style="transition: all 0.3s ease 0s; opacity: 1; visibility: visible;">

from react-simple-img.