Div wont scale to image element resize

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.

This is the form before hitting submit:

And this is the form after hitting submit while waiting for server response:

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.

This is the ReactJS method that I am using to display the image, so it is either a display: 'block' or a display: 'none'.

render() {
        return (
            <img 
                style={{display: this.props.display ? "block" : "none"}} 
                src={loadGif} alt="Loading..." 
                className="bufferIcon"
            />
        );
    }

This is the CSS for the img itself:

.bufferIcon {
    max-height: 25%;
    width: auto;
}

This components exists within a RiotDevKeyForm component:

render() {
        return (<div className="riotdevkeyform">
            <div className="text">
            Enter Riot Dev Key:
            </div>
            <div className="input">
                <form onSubmit={this.state.isLoading ? (e) => e.preventDefault() : this.handleSubmit}>
                    <input readOnly={this.state.isLoading ? true : false} type="text" value={this.state.key} onChange={this.handleChange}></input>
                </form>
            </div>
            <div className="submit">
                <button 
                    style={{display: this.state.isLoading ? "none" : "block"}} 
                    onClick={this.handleSubmit}>
                        Submit
                </button>
            </div>
            <ErrorMsg 
                display={this.state.errMsg.length !== 0}
                errMsg={this.state.errMsg}
            />
            <BufferIcon 
                display={this.state.isLoading}
            />
        </div>);
    }

Which has the following CSS:

.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%;
  }

This RiotDevKeyForm component is also contained within another component:

render() {
    return (
      <div className="App">
        <header className="App-header">
        </header>

        <div className="form">
          {this.state.form_current === FormType.RIOTDEVKEYFORM && <RiotDevKeyForm onKeyAccept={this.handleKey} />}
          {this.state.form_current === FormType.GETSUMMONERSFORM && <GetSummonersForm />}
          {this.state.form_current === FormType.VIEWTEAMSFORM && <ViewTeamsForm />}
        </div>
  
        <BackgroundSlider 
          images={[image1, image2, image3, image4, image5, image6]}
          duration={8}
          transition={2}
        />
      </div>
    );
  }

Which has the following CSS:

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%; }
}