Блог

В настоящее время я пишу веб-приложение для балансировки команд для турниров в League of Legends, но у меня возникла проблема при отображении gif для символа буфера.

Это форма перед нажатием кнопки отправить:

И это форма после нажатия кнопки отправить в ожидании ответа сервера:

Моя проблема заключается в том, что при загрузке изображения div, содержащий его, изменяется до исходного размера изображения вместо его масштабированной формы. Я не уверен, как сделать масштабирование высоты div для изображения.

Это метод ReactJS, который я использую для отображения изображения, так что это либо a display: 'block' , либо a display: 'none' .

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

Это CSS для самого img:

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

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 amp;amp; <RiotDevKeyForm onKeyAccept={this.handleKey} />}
          {this.state.form_current === FormType.GETSUMMONERSFORM amp;amp; <GetSummonersForm />}
          {this.state.form_current === FormType.VIEWTEAMSFORM amp;amp; <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%; }
}