Flipping Card Image Height

Dear @dojo44

Try to add this to your styles.scss:

.card-wrapper .card-up {
  height: 100% !important;
  img {
    height: 100%;
  }
}

.view {
  height: 100%;
}

and here is my example of flipping card:

<div class="col-md-3">
  <mdb-flipping-card #card>
    <div class="face front card tp-box_side tp-box_front">
      <div class="card-up">
        <div class="view overlay hm-white-slight waves-light" mdbWavesEffect>
          <img
            src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28110%29.jpg"
            class="img-fluid"
            alt=""
          />
        </div>
      </div>

      <div class="content">
        <a class="rotate-btn" data-card="card-2" (click)="card.toggle()">
          <mdb-icon fas icon="share-alt"></mdb-icon>
        </a>
        <h5>Card title</h5>
      </div>
    </div>

    <div class="face back tp-box_side tp-box_back">
      <h4 class="card-title">
        Social shares
        <mdb-icon fas icon="times" class="rotate-btn" (click)="card.toggle()"></mdb-icon>
      </h4>
      <hr />

      <ul class="list-inline">
        <li class="list-inline-item">
          <a class="icons-sm fb-ic">
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm tw-ic">
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm gplus-ic">
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm li-ic">
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a mdbBtn floating="true" size="sm" color="git" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="github"> </mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a mdbBtn floating="true" size="sm" color="pin" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="pinterest"> </mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a mdbBtn floating="true" size="sm" color="ins" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="instagram"> </mdb-icon>
          </a>
        </li>
      </ul>

      <h5>Join our community</h5>
      <hr />

      <ul class="list-inline">
        <li class="list-inline-item">
          <a class="icons-sm fb-ic">
            <mdb-icon fab icon="facebook-f"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm tw-ic">
            <mdb-icon fab icon="twitter"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm gplus-ic">
            <mdb-icon fab icon="google-plus"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a class="icons-sm li-ic">
            <mdb-icon fab icon="linkedin-in"></mdb-icon>
          </a>
        </li>
        <li class="list-inline-item">
          <a mdbBtn color="ins" class="waves-light" mdbWavesEffect>
            <mdb-icon fab icon="instagram"> </mdb-icon>
          </a>
        </li>
      </ul>
    </div>
  </mdb-flipping-card>
</div>

Hope it helps!

Best Regards, Bartosz.