Responsive Picture Demostration

index.html

<div id="root"><div>

responsive-picture-demostration.markdown

Responsive Picture Demostration

A Pen by Duncan Meech on CodePen.

License.

script.babel

class ResponsivePicture extends React.Component {
  render() {
    const { baseURL } = this.props;
    return (
      <img src={baseURL} />
    )
  }
}

class Grid extends React.Component {
  render() {
    const { children, containerWidth } = this.props;
    return (
      <div className="grid" style={{ width: `calc(${containerWidth}vw - 2rem`}}>{children}</div>
    )
  }
}

class Tile extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div className="tile">{children}</div>
    )
  }
}

// ===================================================================================================
// all images are derived from this
// ===================================================================================================
const urls = [
  "https://a0.muscache.com/4ea/air/v2/pictures/965e271b-3a7c-4105-8a68-9f89d11766e6.jpg", 
  "https://a0.muscache.com/4ea/air/v2/pictures/f51ae7fb-255a-47a8-bb29-6f7adc193171.jpg",
  "https://a0.muscache.com/4ea/air/v2/pictures/ee491326-db08-4d06-8a7d-541b3ee73bed.jpg"
]
// ====================================================================================================
// Let React do its thing
// ====================================================================================================
ReactDOM.render((
  <Grid containerWidth={100}>
    {urls.map(url => (
      <Tile>
        <ResponsivePicture baseURL={url} containerWidth={50} imageWidth={100 / urls.length} />
      </Tile> 
    ))}    
  </Grid>  
), document.getElementById('root'));

scripts

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

style.scss

body {
  padding: 1rem;
  margin: 0;
}
.grid {
  display: flex;
  justify-content: space-between;
}
.tile {
  background-color: whitesmoke;
  margin-right: 1rem;
  width: 100%;
  &:last-child {
    margin-right: 0;
  }
}
img {
  width: 100%;
}