怎么做 <img> 和 <md-card> 角度物質響應？

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。 布局對齊也可能有助於您的事業。

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

查看文檔以獲取更多選項。