Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-image-responsive with all npm packages installed. Try it out:

var reactImageResponsive = require("react-image-responsive")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-image-responsive v1.0.18

An image that is responsive to its width on the screen (can be also a background image)

react-image-responsive

An image that is responsive to its width on the screen (can be also a background image) Works with retina displays.

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

npm install react-image-responsive

Usage (ES6 + JSX):

import React from 'react';
import ImageResponsive, {Source} from 'react-image-responsive';

React.render(
  <div>
    <ImageResponsive type="image" src="http://placehold.it/50x50" width="50%" height="200px">
        <Source src="http://placehold.it/1600x300" maxWidth={1600}/>
        <Source src="http://placehold.it/300x300"  maxWidth={300}/>
        <Source src="http://placehold.it/500x300"  maxWidth={500}/>
        <Source src="http://placehold.it/800x300"  maxWidth={800}/>
        <Source src="http://placehold.it/1000x300" maxWidth={1000}/>
    </ImageResponsive>
    <br/>
    <br/>
    <ImageResponsive type="background-image" src="http://placehold.it/50x50" width="50%" height="200px" style={{transition: 'background-image .3s linear'}}>
        <Source src="http://placehold.it/300x300"  maxWidth={300}/>
        <Source src="http://placehold.it/500x300"  maxWidth={500}/>
        <Source src="http://placehold.it/800x300"  maxWidth={800}/>
        <Source src="http://placehold.it/1600x300" maxWidth={1600}/>
        <Source src="http://placehold.it/1000x300" maxWidth={1000}/>
        This one is just a background image
        <br/>
        It looks perfect
    </ImageResponsive>
  </div>,
  document.getElementById('root')
);
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free