React开发英雄联盟赛事战队平衡工具 加载缓冲gif时div不随缩放图片自适应高度

你当前遇到的布局错位是两个原因共同导致的：

• 你给.bufferIcon设置的max-height: 25%是相对父元素高度生效的，但父元素.riotdevkeyform本身没有固定高度，高度由内部子元素的原始尺寸撑开，形成了「父高度依赖子元素尺寸、子元素缩放比例依赖父高度」的循环依赖，浏览器会直接忽略百分比高度规则，按照gif原始尺寸计算布局，导致外层div被撑大。
• 你写的.riotdevkeyform *通配符选择器给所有子元素强行添加了display: flex、width: 80%属性，替换元素img不需要flex布局，额外的样式也干扰了图片的尺寸计算。

方案1：直接修改图标样式（最快生效） #

将.bufferIcon的百分比高度改为固定高度，同时覆盖通配符带来的多余样式，代码如下：

.bufferIcon {
    /* 可根据你想要的图标大小调整数值 */
    max-height: 40px;
    width: auto;
    /* 覆盖通配符的多余样式 */
    display: block !important;
    width: auto !important;
}

方案2：增加容器固定布局（更稳定，避免高度跳动） #

首先给加载图标套一个固定高度的容器，修改RiotDevKeyForm的render代码：

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}
            />
            {/* 新增容器包裹加载图标 */}
            <div className="buffer-container">
                <BufferIcon 
                    display={this.state.isLoading}
                />
            </div>
        </div>);
    }

然后添加容器的CSS：

.buffer-container {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.bufferIcon {
    max-height: 100%;
    width: auto;
    display: block;
}

不推荐使用.riotdevkeyform *这种通配符选择器给所有子元素加通用样式，会带来很多不必要的样式冲突，建议把需要通用设置的样式单独提取为类名，给对应元素手动添加即可。

内容的提问来源于stack exchange，提问作者neRienn