CODEWITHSUNDEEP
cssmaterialize
Ignacio Correa
Ignacio Correa

Reputation: 3

how to make an image use full height of it's parent in materialize Cards

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(problem image). 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 (problem with backgroung-image) 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 (image: how it should be)

Thanks for your time even if you didn't repy. Cheers from Chile.

Html code

<div class="col s12 m6 l4 offset-m3 options">
        <div class="card">
          <div class="topTitleCard"><h5 class="" >Opción 3 |</p></div>
          <div class="card-image">
            <img src="./content/araucaria_v2.jpg">
            <div class="card-title">
              <h4 class="white-text textShadow thicker-font">Viajando en el Bosque Milenario</h4>
            </div>
            <a rel="addtoCart"  class="option3 btn-floating btn-large halfway-fab waves-effect waves-light mygreen" ><i class="material-icons">shopping_cart</i></a>
          </div>
          <div class="card-content">
            <br>
            <p>
              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.
              <a href="#misOpciones" id="verVuela" rel="seeMore">Ver más...</a>
            </p>
          </div>
          <div>
            <div class="card-tabs">
              <h6 class="text-mygreen center-align">Ven y escoge tu vista para la eternidad:</h6>
              <br>
              <ul class="tabs tabs-fixed-width">
                <li class="tab"><a class="whichTree active" value="1" href="#test3-1" style="color:#0F0F0F;">Mirador</a></li>
              </ul>
            </div>
            <div class="card-content mygreen white-text myTabsCards">
              <div id="test3-1">
                <p>10 UF</p>
                <a class="option3 waves-effect waves-light btn buyBtn" rel="addtoCart">Comprar</a>
              </div>
              <div class="bottomTabsPrices">
                *precios validos hasta el 31/12/2019
              </div>
            </div>
          </div>
        </div>
      </div>

CSS code (don't think is going to be useful, but here it's anyway):

.card-image{ 
margin-top:50px !important;
position: relative;
background-color: rgba(84,115,93,.5);
}
.card-image img{
max-width: 100%;
max-height:100%;
}

Upvotes: 0

Views: 1555

Answers (1)

Mileta Dulovic
Mileta Dulovic

Reputation: 1064

On your image put this css

width: 100%;
height: 100%;
object-fit:cover;

When using object-fit on image, you need to give it width and height properties. It won't work with max-width and max-height if width and height are not specified too.

It will always fill the parent of an image. It might cut it on sides but this depends of aspect ratio of image and parent.

Upvotes: 1

Related Questions