An image that is responsive to its width on the screen (can be also a background image)
npm install react-image-responsiveAn 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/
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?
``bash`
yarn add react-image-responsive
`javascript
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(
alt="this is my image"
width="400px"
height="100px"
sources={sources}
/>
This image has a fixed width of 400px, you should see a 400px image
alt="this is my image"
width="20%"
height="100px"
sources={sources}
/>
This image has a 20% width, resize your browser to see the src adjusting
alt="this is my image"
width="50%"
height="100px"
sources={sources}
/>
This image has a 50% width, resize your browser to see the src adjusting