Materialize: Image card with different aspect ratio

[joshuaavalon]

Code Pen Example

I am try to create image card with fixed card size and fixed image box size. However, different aspect ratio images will result in different height of the image box. Is there anyway to solve this?

[nirajrajgor]

One way is to manually set the height of the image using following css styles. Set the appropriate height as per requirement.
Note: both box and image height should be same in order to view entire image.

.card.medium{
   .card-image{
    max-height:100%; // Also this should be 100%.
     height:300px; // corresponds to box height
    img{height:300px;} // corresponds to image height
    } 
  }

[joshuaavalon]

Forcing img height will destory the aspect ratio.

[joshuaavalon]

One of the solution I found is adding object-fit: cover; to img. However, materialboxed will not display the full image.

[Nohinn]

Just an annotation. Object-fit is not supported on IE/Edge http://caniuse.com/#feat=object-fit

[manuman94]

My solution was this: First, I set the desired height for the .card-image div container. Then, instead of placing the <img> tag inside, I added background-image to the .card-image div with the URL path of the image. Then, add the background-size: cover and background-position:center rules. This way the image always will fit the height but not changing the aspect-ratio.

This way:

background-image: url(https://unsplash.it/600/700);
background-size: cover;
background-position: center;

A working example:
https://jsfiddle.net/9u6uf713/

Greetings

[WickedSik]

@joshuaavalon

A fairly easy fix for the .materialized images:

.card img {
    max-height: 200px;
    object-fit: cover;
}
.card img.materialized.active {
    max-height: none;
    object-fit: none;
}