Search code examples
materialize

using material box for card images


I am trying to use material box for card images. My target is to click on card image and view it fullscreen.

  <div class="card large hoverable">
    <div class="card-image">
      <img materialize="" class="materialboxed" width="650" src.bind="movie.poster">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">${movie.title + " - " + movie.imdbRating}<i class="material-icons right">more_vert</i></span>
      <p>${movie.genre.join(', ')}</p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">${movie.title}<i class="material-icons right">close</i></span>
      <p>${movie.director}</p>
      <p>${movie.genre.join(', ')}</p>
      <p>${movie.actors.join(', ')}</p>
      <p>${movie.plot}</p>
    </div>
  </div>

The problem is that it could not make the image container bigger. So the image will be zoomed but because the container is small it couldn't show all of the image.


Solution

  • It was an issue an fixed in their last commit:

    https://github.com/Dogfalo/materialize/issues/2091