title: Material Angular card display
body: <p>I have a gallery of images and I would like to display them in a polaroid card-based system spanning multiple rows and columns. The problem I'm facing relates to the layout of the image. When images are both portrait and landscape, the mat-card attribute for the landscape ones gets bloated up to match the size of the portrait ones. How can I have a naturally filling system where the mat-card is adaptable to the width/height ratio of the image?</p>
  <p>HTML:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;div fxLayout=&quot;row&quot;&gt;
          &lt;div layout=&quot;column&quot;&gt;
              &lt;div fxFlex=&quot;100&quot; fxFlexOffset=&quot;1&quot; fxLayoutWrap fxLayoutGap=&quot;2rem&quot; class=&quot;mat-elevation-z0&quot; *ngIf=&quot;postcards != null&quot;&gt;
                  &lt;mat-card *ngFor=&quot;let postcard of postcards let index = index&quot; &gt;
                          &lt;img mat-card-image src=&quot;{{postcard.img}}&quot; alt=&quot;{{postcard.postcard_id}}&quot; class=&quot;postcards&quot; (click)=&quot;display_postcard(index)&quot;&gt;
                  &lt;/mat-card&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>    .postcards {
          max-width: 320px;
      }
  </code></pre>
  <p>Current view:
  <a href="https://i.stack.imgur.com/6865z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6865z.jpg" alt="You can see how the container for each landscape card gets expanded to match the height of the portrait one (not what I would like to achieve)" /></a></p>
  <p>And this is what I would like to achieve:
  <a href="https://i.stack.imgur.com/oBN5B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oBN5B.png" alt="enter image description here" /></a></p>
  <p>Thank you!</p>