html - Div 不会缩放到图像元素调整大小

Question

我目前正在编写一个 Web 应用程序来平衡英雄联盟锦标赛中的团队，但是在显示缓冲区符号的 gif 时遇到问题。

这是点击提交之前的表单：

这是在等待服务器响应时点击提交后的表单：

我的问题是当我加载图像时，包含它的 div 会调整为图像的原始大小，而不是重新调整后的形式。我不确定如何使 div 高度缩放到图像。

这是我用来显示图像的 ReactJS 方法，所以它是 adisplay: 'block'或 a display: 'none'。

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

这是 img 本身的 CSS：

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

该组件存在于 RiotDevKeyForm 组件中：

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

它具有以下 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%;
  }

这个 RiotDevKeyForm 组件也包含在另一个组件中：

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

它具有以下 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%; }
}

标签： htmlcssreactjsimage-resizing