responsive-image.js: A simple wrapper around the gatsby-image component to make setting the object fit and object position properties easier.

image.js

import React from 'react';
import GatsbyImage from 'gatsby-image';
import PropTypes from 'prop-types';

const Image = ({ objectFit, objectPosition, ...rest }) => {
  let wrapperStyles = {};
  let imageStyles = {};

  if (objectFit === 'contain') {
    wrapperStyles.width = '100%';
    wrapperStyles.maxWidth = '100%';
  }

  switch (objectFit) {
    case 'contain':
      imageStyles.objectFit = 'contain';
      break;
    case 'cover':
      imageStyles.objectFit = 'cover';
      break;
    case 'fill':
      imageStyles.objectFit = 'fill';
      break;
    case 'none':
      imageStyles.objectFit = 'none';
      break;
    case 'scale-down':
      imageStyles.objectFit = 'scale-down';
      break;
    default:
      break;
  }

  switch (objectPosition) {
    case 'center':
      imageStyles.objectPosition = 'center center';
      break;
    case 'left':
      imageStyles.objectPosition = 'left center';
      break;
    case 'left top':
      imageStyles.objectPosition = 'left top';
      break;
    case 'top':
      imageStyles.objectPosition = 'center top';
      break;
    case 'right top':
      imageStyles.objectPosition = 'right top';
      break;
    case 'right':
      imageStyles.objectPosition = 'right center';
      break;
    case 'right bottom':
      imageStyles.objectPosition = 'right bottom';
      break;
    case 'bottom':
      imageStyles.objectPosition = 'center bottom';
      break;
    case 'left bottom':
      imageStyles.objectPosition = 'left bottom';
      break;
    default:
      break;
  }

  return (
    <GatsbyImage
      style={wrapperStyles}
      imgStyle={imageStyles}
      placeholderStyle={imageStyles}
      {...rest}
    />
  );
};

Image.defaultProps = {
  objectFit: 'cover',
  objectPosition: 'center',
};

Image.propTypes = {
  objectFit: PropTypes.string,
  objectPosition: PropTypes.string,
};

export default Image;