title: Div wont scale to image element resize
body: <p>I am currently writing a web application to balance teams for tournaments in League of Legends, but I am having an issue when displaying a gif for a buffer symbol.</p>
  <p>This is the form before hitting submit:</p>
  <p><a href="https://i.stack.imgur.com/5CzvL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5CzvL.png" alt="Form before submitting" /></a></p>
  <p>And this is the form after hitting submit while waiting for server response:</p>
  <p><a href="https://i.stack.imgur.com/6IS6V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6IS6V.png" alt="Form after submitting" /></a></p>
  <p>My issue is when I load in the image, the div containing it resizes to the original size of the image instead of its rescaled form. I'm not sure how to make div height scale to the image.</p>
  <p>This is the ReactJS method that I am using to display the image, so it is either a <code>display: 'block'</code> or a <code>display: 'none'</code>.</p>
  <pre><code>render() {
          return (
              &lt;img 
                  style={{display: this.props.display ? &quot;block&quot; : &quot;none&quot;}} 
                  src={loadGif} alt=&quot;Loading...&quot; 
                  className=&quot;bufferIcon&quot;
              /&gt;
          );
      }
  </code></pre>
  <p>This is the CSS for the img itself:</p>
  <pre><code>.bufferIcon {
      max-height: 25%;
      width: auto;
  }
  </code></pre>
  <p>This components exists within a RiotDevKeyForm component:</p>
  <pre><code>render() {
          return (&lt;div className=&quot;riotdevkeyform&quot;&gt;
              &lt;div className=&quot;text&quot;&gt;
              Enter Riot Dev Key:
              &lt;/div&gt;
              &lt;div className=&quot;input&quot;&gt;
                  &lt;form onSubmit={this.state.isLoading ? (e) =&gt; e.preventDefault() : this.handleSubmit}&gt;
                      &lt;input readOnly={this.state.isLoading ? true : false} type=&quot;text&quot; value={this.state.key} onChange={this.handleChange}&gt;&lt;/input&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div className=&quot;submit&quot;&gt;
                  &lt;button 
                      style={{display: this.state.isLoading ? &quot;none&quot; : &quot;block&quot;}} 
                      onClick={this.handleSubmit}&gt;
                          Submit
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;ErrorMsg 
                  display={this.state.errMsg.length !== 0}
                  errMsg={this.state.errMsg}
              /&gt;
              &lt;BufferIcon 
                  display={this.state.isLoading}
              /&gt;
          &lt;/div&gt;);
      }
  </code></pre>
  <p>Which has the following CSS:</p>
  <pre><code>.riotdevkeyform {
      display: grid;
      grid-template-areas: none;
      padding: 0 auto;
      margin: 0 auto;
    }
    
    .riotdevkeyform * {
      margin: 0 auto;
      padding: 2px;
      display: flex;
      justify-content: center;
      font-size: 1em;
      font-family: Cambria;
      font-size: 12pt;
      font-weight: bolder;
      width: 80%;
    }
    
    .riotdevkeyform input {
      padding: 0px;
      width: 90%;
    }
    
    .riotdevkeyform button {
      padding: 0px;
      max-width: 30%;
    }
  </code></pre>
  <p>This RiotDevKeyForm component is also contained within another component:</p>
  <pre><code>render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;header className=&quot;App-header&quot;&gt;
          &lt;/header&gt;
  
          &lt;div className=&quot;form&quot;&gt;
            {this.state.form_current === FormType.RIOTDEVKEYFORM &amp;&amp; &lt;RiotDevKeyForm onKeyAccept={this.handleKey} /&gt;}
            {this.state.form_current === FormType.GETSUMMONERSFORM &amp;&amp; &lt;GetSummonersForm /&gt;}
            {this.state.form_current === FormType.VIEWTEAMSFORM &amp;&amp; &lt;ViewTeamsForm /&gt;}
          &lt;/div&gt;
    
          &lt;BackgroundSlider 
            images={[image1, image2, image3, image4, image5, image6]}
            duration={8}
            transition={2}
          /&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  <p>Which has the following CSS:</p>
  <pre><code>body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    }
    
    .form {
      background-color: azure;
      margin: 0 auto;
      padding: 5px;
      top: 50%;
      transform: translateY(40vh);
      min-width: 15%;
      min-height: 10%;
      max-width: 300px;
      /*max-height: 150px;*/
      opacity: 75%;
      border: solid black 2px;
      -webkit-animation: fadeIn 1.2s ease-in-out;
      animation: fadeIn 1.2s ease-in-out;
    }
    
    /* CSS Animation */
  
    @-webkit-keyframes fadeIn {
      0% { 
          opacity:0; 
          transform: scale(0.6);
      }
  
      100% {
          opacity:100%;
          transform: scale(1);
      }
  }
  
  @keyframes fadeIn {
      0% { opacity:0; }
      100% { opacity:100%; }
  }
  </code></pre>