[英]How to make <img> and <md-card> responsive in angular Material?
我通过使用<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>
截图:
这可能有助于您的事业。
http://codepen.io/sstorie/pen/myJWxQ关键是添加到父级的两个类和每个卡中的img
.parent {
overflow: hidden;
}
.card img {
width: 100%;
height: auto;
}
您可以使用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>
查看文档以获取更多选项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.