JSFiddle - React, Tailwind, and code Playground

by mlnmln

HTML

<div class="FlexEmbed FlexEmbed-ratio">
    <div class="UserImage FlexEmbed-content"></div>
</div>

CSS

/*
 * FlexEmbed component from suit-css. 
 * @see: https://github.com/suitcss/components-flex-embed/blob/master/lib/flex-embed.css
 */ 

.FlexEmbed {
  display: block;
  overflow: hidden;
  position: relative;
}

/**
 * The aspect-ratio hack is applied to an empty element because it allows
 * the component to respect `max-height`. Default aspect ratio is 1:1.
 */

.FlexEmbed-ratio {
  display: block;
  padding-bottom: 100%;
  width: 100%;
}

/**
 * Fit the content to the aspect ratio
 */

.FlexEmbed-content {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*
 * Additional code to resize/place the background image. 
 */ 

.UserImage {
 background-size: cover;   
 background-image: url(http://placekitten.com/200/400);
}