title: Scale Image to fit card and not overlap title
body: <p>I have some cards with an image and a title below them, where the image and title resize as the card resizes, and the card resizes as the screen size changes. On smaller screens or with longer titles I get a problem where the image covers the text.</p>
  
  <p>I would like the image to scale to fit the card, but stop either when it reaches the width of the card OR the top part of the text. (all images are perfect squares, so img width and height should always be equal)</p>
  
  <p>Here are some screenshots of the results, On the left side are two things that I don't want to happen, and on the right are things that are OK.</p>
  
  <p><a href="https://i.stack.imgur.com/1uFHH.png" rel="nofollow noreferrer">link to image examples of cards</a></p>
  
  <p>Since the complete code is a bit long, here is a JSFiddle with a working example of what it's like now (the cards are in bootstrap styled rows/columns). <a href="http://jsfiddle.net/js47withfeeling/dtbx78ay/4/" rel="nofollow noreferrer">http://jsfiddle.net/js47withfeeling/dtbx78ay/4/</a></p>
  
  <p>Below are some relevant code snippets.</p>
  
  <p>HTML of a card</p>
  
  <pre><code>    &lt;div class="card-column card"&gt;
          &lt;img class="card-img" src="Link to Image"&gt;
          &lt;p class="card-title"&gt;With Security&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>A bunch of cards like that are inside of this HTML block which applies some bootstrap</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div id="loadCardsHere" class="col-md-9 12u(mobile)"&gt;
          &lt;!--cards go here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>relevant CSS</p>
  
  <pre><code>body{
      font-family: 'Old Standard TT', serif;
  }
  .card{
      margin-top:5px;
      margin-right:5px;
  }
  .card-img{
      width:100%;
      max-height:500;
  }
  
  .card-title{
      position:absolute;
      bottom:0;
      align-self: center;
      font-size:180%;
  }
  .card-column{
      float: left;
      width: 32%;
      height:300;
      cursor: pointer;
      border-color: #01ABAA;
      border-width: medium;
  }
  @media screen and (max-width: 600px) {
      .card-column {
        width: 100%;
      }
    }
  @media (min-width: 768px) {
      .card{
          max-width:33%;
          max-height:auto;
      }
  }
  </code></pre>
  
  <p>Is there some sort of CSS attr like " max-height: (parent.height) - (parent.2ndChild.height) "? (That syntax is obviously wrong, but something to that effect)</p>