title: how to make an image use full height of it's parent in materialize Cards
body: <p>I'm using materialize for my project, and I'm having a few problems with horizontal cards. The image I'm using has a height smaller than it's parent div so at the end of it, the background color is shown(<a href="https://i.stack.imgur.com/3P3r2.jpg" rel="nofollow noreferrer">problem image</a>). I have tried to use max-width: 100% and max-height: 100% and nothing, also I tried to put the image as background-image in CSS instead of the img tag, but materialize hide the image if it doesn't detect the tag  (<a href="https://i.stack.imgur.com/5vLGZ.png" rel="nofollow noreferrer">problem with backgroung-image</a>)
  I know i should stretch an image, but its only a few px. And why i want to do this? bc it is ok if someone with a big screen sees it, but if i try to use a smaller screen, the text column on the right get taller, and the image stop covering the hole height of the row. This is what i want (<a href="https://i.stack.imgur.com/RuMbV.png" rel="nofollow noreferrer">image: how it should be</a>)</p>
  
  <p>Thanks for your time even if you didn't repy. Cheers from Chile.</p>
  
  <p>Html code</p>
  
  <pre><code>&lt;div class="col s12 m6 l4 offset-m3 options"&gt;
          &lt;div class="card"&gt;
            &lt;div class="topTitleCard"&gt;&lt;h5 class="" &gt;Opción 3 |&lt;/p&gt;&lt;/div&gt;
            &lt;div class="card-image"&gt;
              &lt;img src="./content/araucaria_v2.jpg"&gt;
              &lt;div class="card-title"&gt;
                &lt;h4 class="white-text textShadow thicker-font"&gt;Viajando en el Bosque Milenario&lt;/h4&gt;
              &lt;/div&gt;
              &lt;a rel="addtoCart"  class="option3 btn-floating btn-large halfway-fab waves-effect waves-light mygreen" &gt;&lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="card-content"&gt;
              &lt;br&gt;
              &lt;p&gt;
                Escoge el mirador que más te llene de paz, para que el día de mañana, puedán esparcir tus cenizas en el lugar que tu escogiste. Obten calma por siempre con el sonido del agua corriendo, o por el sonido de las copas de las Araucarias y Coihues moviendose por el viento.
                &lt;a href="#misOpciones" id="verVuela" rel="seeMore"&gt;Ver más...&lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;div class="card-tabs"&gt;
                &lt;h6 class="text-mygreen center-align"&gt;Ven y escoge tu vista para la eternidad:&lt;/h6&gt;
                &lt;br&gt;
                &lt;ul class="tabs tabs-fixed-width"&gt;
                  &lt;li class="tab"&gt;&lt;a class="whichTree active" value="1" href="#test3-1" style="color:#0F0F0F;"&gt;Mirador&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="card-content mygreen white-text myTabsCards"&gt;
                &lt;div id="test3-1"&gt;
                  &lt;p&gt;10 UF&lt;/p&gt;
                  &lt;a class="option3 waves-effect waves-light btn buyBtn" rel="addtoCart"&gt;Comprar&lt;/a&gt;
                &lt;/div&gt;
                &lt;div class="bottomTabsPrices"&gt;
                  *precios validos hasta el 31/12/2019
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>CSS code (don't think is going to be useful, but here it's anyway):</p>
  
  <pre><code>.card-image{ 
  margin-top:50px !important;
  position: relative;
  background-color: rgba(84,115,93,.5);
  }
  .card-image img{
  max-width: 100%;
  max-height:100%;
  }
  </code></pre>