如何使元素保持比例？

Question

我的网站上有几个框可供选择。顶部有一个来自Font-Awesome的图标，底部有我的文本。 当我全屏播放时，效果很好。当我将其放在手机尺寸上时，它可以很好地工作。当我介于这两者之间时，绝对是一团糟。

有没有一种方法可以将这些元素保持在相同位置和相同比例。因此，文本始终位于底部的x％处，并且在所有视图尺寸中占据相同的位置，并且在图标中也占据相同的位置。

这些是桌面版，移动版以及两者之间乱七八糟的图片。

.interest-box {
  position: relative;
  border: 10px solid white;
}

.interest-box-adjuster {
  padding-top: 100%;
}

.interest-box-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.interest-box-content .interest-icon {
  font-size: 100px;
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  transform: translateX(-50%, -50%);
}

.interest-box-activated {
  color: #0375B4;
  background-color: white;
}

.interest-box-activated .activated-icon {
  color: #0375B4;
}

.activated-icon {
  position: absolute;
  top: 0;
  right: 0;
  color: transparent;
}

.interest-text {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
}

@media screen and (max-width: 769px) {
  .register-form {
    text-align: center;
  }
  .register-form p {
    margin-bottom: 20px;
  }
  .register-form input {
    background-color: rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-bottom: 10px;
  }
  .register-form input[type=date] {
    width: 100%;
  }
  .register-form input[type=password] {
    border: 6px solid white;
    height: 50px;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .interest-box-content .interest-icon {
    font-size: 55px;
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    transform: translateX(-50%, -50%);
  }
}

<div className="column is-one-fifth-desktop is-half-touch">
  <div className="interest-box">
    <div className="interest-box-adjuster">
      <div ref={"interest_box_content"} className={"interest-box-content" + (this.state.activated==t rue ? 'interest-box-activated' : '')} onClick={this.handleClick}>
        <i ref={"interest_icon"} className={"interest-icon fas" + this.props.icon}></i>
        <i className="activated-icon fas fa-check"></i>
        <span className="interest-text is-size-3 is-size-4-mobile">Sports</span>
      </div>
    </div>
  </div>
</div>