Truly responsive materialize horizontal card with img

Question

right now I'm working with materializeccs cards, but I have an issue with these. The thing here is that I want the card to be the same size as the image height is, so there will not be a white space under the image when resizing the screen. This is the code I have right now, If the screen goes smaller the image starts to make smaller too(cause the responsive-img class), leaving more and more white space under it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">



  <div class="col s12 m7">

    <div class="card horizontal">

      <div class="card-image">

        <img src="https://lorempixel.com/190/100/nature/6">

      </div>

      <div class="card-stacked">

        <div class="card-content">

          <p>I am a very simple card. I am good at containing small bits of information.</p>

        </div>

        <div class="card-action">

          <a href="#">This is a link</a>

        </div>

      </div>

    </div>

  </div>





<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

And this is how I need it, no matter what the screen size is, the card height must be the same as the image. Please help. Thank you all.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">



  <div class="col s12 m7">

    <div class="card horizontal">

      <div class="card-image">

        <img src="https://lorempixel.com/100/190/nature/6">

      </div>

      <div class="card-stacked">

        <div class="card-content">

          <p>I am a very simple card. I am good at containing small bits of information.</p>

        </div>

        <div class="card-action">

          <a href="#">This is a link</a>

        </div>

      </div>

    </div>

  </div>





<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

try adding this css to customize you output :

.card-stacked {
    max-height: 100px;
    display: inline-block;
}

.card .card-content {
    padding: 15px 25px !important;
}
.card-action {
padding: 5px 25px !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <div class="col s12 m7">
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/190/100/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>


<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Truly responsive materialize horizontal card with img

Sign up