Iam a Developer Iam a Developer - 6 months ago 261
AngularJS Question

How to make <img> and <md-card> responsive in angular Material?

I'm displaying dynamic content by looping with

<md-card>
and
<image>
tags. My output is not responsive on tablet or mobile screens, showing a scrollbar instead of the next line. What's wrong with my code and how can I make it responsive?

<p>Show Menus</p>
<div layout="row" layout-margin >
<md-card ng-repeat="menu in sampleMenus">
<md-card>
<img src="http://placehold.it/350x150" class="md-card-image" alt="image caption"/>
<md-card-content >
<h2>{{menu.displayName}}</h2>
<p>{{menu.type}}</p>
</md-card-content>
</md-card >
</md-card>
</div>


Screenshots: Desktop View

![Tab View and mobile nearly same

Answer

This may help your cause.
http://codepen.io/sstorie/pen/myJWxQ The key is those two classes added to the parent and the img in each card

.parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}