angular/material2 md-card responsive images

1.8k Views Asked by At

Using angular/material2 how do I set img md-card-image to be responsive on height. Here is the example taken from https://github.com/angular/material2/blob/master/src/lib/card/README.md

I want to set the image height to 200px and expect to scale the width to this.

<md-card>
   <md-card-header>
      <img md-card-avatar src="path/to/img.png">
      <md-card-title>Header title</md-card-title>
      <md-card-subtitle>Header subtitle</md-card-subtitle>
   </md-card-header>
   <img md-card-image src="path/to/img.png">
   <md-card-content>
      <p>Here is some more content</p>
   </md-card-content>
</md-card>

and here is an example http://plnkr.co/edit/DE8O7UYKid2NhpkiRWEF?p=preview

I tried to wrap my img tag around a relative container and giving for the image absolute position, but still is not the desired result:

http://plnkr.co/edit/ncJypD9NTeHqkcRA8TFb?p=preview

0

There are 0 best solutions below