JSFiddle - React, Tailwind, and code Playground

HTML

<div class="visual">
     <div class="parent">
        <div class="square-child"></div>
     </div>
    </div>

CSS

.visual {
  background-color:lightblue;
  position:absolute;
  overflow:hidden;
  width:250px;
  height:600px;  
}

    .parent {
      width:100%;
      height:auto !important;
      position: relative;
      display: block;

    } 

    .parent:after {
      padding-top: 100%;
      display: block;
      content: '';
    }
    .parent .square-child {
      width:auto;
      height:auto;
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
      background-repeat:no-repeat;
      background-size:cover;
      background-position: center;
      background-image: url('http://lorempixel.com/output/abstract-q-g-850-480-8.jpg');
    }

JavaScript

$( ".visual" ).animate({
    width: "600px",
    height: "300px"
  }, 2000, function() {
    // Animation complete.
  });