如何使 <img> 和 <md-card> 在 angular Material 中响应？

Question

我通过使用 <md-card> 和 <image> 标签循环显示动态内容。我的输出在平板电脑或移动设备屏幕上没有响应，显示滚动条而不是下一行。我的代码有什么问题，如何让它响应？

<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>

截图：

Answer 1

这可能对您的事业有所帮助。
http://codepen.io/sstorie/pen/myJWxQ 关键是那两个类添加到父级和每个卡中的 img

.parent {
  overflow: hidden;
}

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

Answer 2

您可以使用 flex（行宽，列高）属性在父容器上声明 md-card 大小和 layout-wrap。 Layout-align 也可能对您的事业有所帮助。

<div layout="row" layout-margin layout-wrap layout-align="center center">
     <md-card flex="25"> //25% of parent
                //content 
     </md-card>
</div>

查看文档了解更多选项。

如何使 <img> 和 <md-card> 在 angular Material 中响应？

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

angularjs

responsive-design

material-design

angular-material