2.0.2 • Published 6 years ago
react-image-responsive v2.0.2
react-image-responsive
An image that is responsive to its width on the screen (can be also a background image) Works with retina displays.
Demo: https://youpinadi.github.io/react-image-responsive/
Why?
Media queries only take care of the screen size and resolution, not about the actual image size. What if your image is 300px on an iPhone and only 100px on a larger screen?
Installation
yarn add react-image-responsive
import ReactDOM from 'react-dom';
import ImageResponsive from 'react-image-responsive';
const sources = [
{ maxWidth: 100, src: 'http://placehold.it/100x100' },
{ maxWidth: 200, src: 'http://placehold.it/200x100' },
{ maxWidth: 400, src: 'http://placehold.it/400x100' },
{ maxWidth: 800, src: 'http://placehold.it/800x100' },
{ maxWidth: 1200, src: 'http://placehold.it/1200x100' }
];
ReactDOM.render(
<div className="App">
<figure>
<ImageResponsive
src="http://placehold.it/50x50"
alt="this is my image"
width="100px"
height="100px"
sources={sources}
/>
<figcaption>
This image has a fixed width of 100px, you should see a 100px image
</figcaption>
</figure>
<figure>
<ImageResponsive
src="http://placehold.it/50x50"
alt="this is my image"
width="105px"
height="100px"
sources={sources}
/>
<figcaption>
This image has a fixed width of 105px, you should see a 200px image
</figcaption>
</figure>
<figure>
<ImageResponsive
src="http://placehold.it/50x50"
alt="this is my image"
width="400px"
height="100px"
sources={sources}
/>
<figcaption>
This image has a fixed width of 400px, you should see a 400px image
</figcaption>
</figure>
<figure>
<ImageResponsive
src="http://placehold.it/50x50"
alt="this is my image"
width="20%"
height="100px"
sources={sources}
/>
<figcaption>
This image has a 20% width, resize your browser to see the src adjusting
</figcaption>
</figure>
<figure>
<ImageResponsive
src="http://placehold.it/50x50"
alt="this is my image"
width="50%"
height="100px"
sources={sources}
/>
<figcaption>
This image has a 50% width, resize your browser to see the src adjusting
</figcaption>
</figure>
</div>,
document.getElementById('root')
);