title: Bootstrap 4 Responsive Card Height for Fixed Aspect Ratio Image
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#player1Choice").append("&lt;img src='http://via.placeholder.com/243x166' class='rpsImage'&gt;");
  $("#player2Choice").append("&lt;img src='http://via.placeholder.com/243x166' class='rpsImage'&gt;");</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#player1Card, #player2Card, #resultsCard {
      max-width: 250px;
      max-height: 250px;
      width: 58%;
      background-color: #140B7B;
      color: #FFFFFF;
  }
  
  .userName {
      font-weight: bold;
      height: 45px;
  }
  
  #p1Display, #p2Display {
      height: 170px;
  }
  
  #p1WL, #p2WL {
      background-color: #140B7B;
      color: #FFFFFF;
      height: 30px;
      margin-bottom: 0;
  }
  
  .rpsImage {
      width: 100%;
      height: auto;
  }
  
  @media screen and (min-width: 576px) and (max-width: 767px) {
  
      #player, #status {
          height: 80px;
      }
      
      #player1Card, #player2Card, #resultsCard {
          max-height: 166px;
      }
  
      #p1WL, #p2WL {
          font-size: 0.5rem;
          height: 20px;
      }
  
      .userName {
          font-size: 0.85rem;
          height: 36px;
      }
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-4 d-flex justify-content-center"&gt;
      &lt;div class="card text-center mt-1 mb-2" id="player1Card"&gt;
        &lt;div class="card-header p-0"&gt;
          &lt;h5 class="card-header userName" id="player1"&gt;Player 1&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="card-body p-0" id="p1Display"&gt;
          &lt;div id="player1Choice"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card-footer p-0"&gt;
          &lt;p class="w-100" id="p1WL"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-4 d-flex justify-content-center"&gt;
      &lt;div class="card align-items-center justify-content-center mt-1 mb-2" id="resultsCard"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-4 d-flex justify-content-center"&gt;
      &lt;div class="card text-center mt-1 mb-2" id="player2Card"&gt;
        &lt;div class="card-header p-0"&gt;
          &lt;h5 class="card-header userName" id="player2"&gt;Player 2&lt;/h5&gt;
        &lt;/div&gt;
        &lt;div class="card-body p-0" id="p2Display"&gt;
          &lt;div id="player2Choice"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="card-footer p-0"&gt;
          &lt;p class="w-100" id="p2WL"&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I make a card body to have a fixed height without content but be responsive to a fixed aspect ratio image that I add with jQuery at a specific point in my program.  My card is 250px by 250px for a screen that is 992px and larger.  The image size is 243px x 166px and I have used the following CSS to scale it:  </p>
  
  <pre><code>.myImage {
      width: 100%;
      height: auto;
  }
  </code></pre>
  
  <p>However, when I change the viewport size for a tablet the height stays at 250px instead of shrinking to the size of the content because I used "max-height: 250px;" to keep the body from collapsing when empty.  </p>
  
  <p>Is there any other way to keep the card height at 250px when card body has no content but have it be responsive to the height of the fixed aspect ratio image other than using @media queries for specific breakpoints? </p>
  
  <p>Here is the <a href="https://jsfiddle.net/jataylornc/nrh99602/24/" rel="nofollow noreferrer">jsFiddle</a></p>