Javascript 角材料md卡不响应

我正在尝试使用md卡创建一个文章卡网格。在大型显示器上，我希望它有3张卡宽，平板电脑大小2张卡宽，智能手机1张卡宽。虽然图像不会是完全相同的大小，我希望所有的卡都是相同的大小，而不会扭曲图像

我不知道如何做到这一点。我真的希望避免硬编码设置卡片的宽度和高度，而是希望它们随显示器的大小而变化。我想我需要使用flex属性

这就是它现在的样子：

以下是我的卡片视图的结构：

<md-content>
    <section class="cards" ng-if="view === 'Articles'">
            <div layout="row" layout-sm="column" layout-align="center" layout-wrap>

              <md-card flex="33" ng-repeat="article in home.articles | filter:searchCard">
                <img ng-src="{{article.imagePath}}" alt="Test image">
                <div class="card_content">
                    <a href="/article/{{article.id}}"><h3 class="md-subhead article_card_title">{{article.title}}</h3></a>
                    <div class="card_agency">
                        <span class="agency_name">{{article.agency}}</span>
                    </div>
                </div>
              </md-card>

              <h1 class="md-display-1" ng-show="(home.articles | filter:searchCard).length == 0">No results!</h1>
            </div>
        </section>
</md-content>

{{第条.代理}
没有结果！

---

任何关于如何使这些卡片具有响应性的见解都将不胜感激

您要求所有图像可能具有不同的大小，同时保持它们所在元素的大小

想想看。 如果你有一片比萨饼，但它对你的盘子来说太大了，那么多余的比萨饼去哪里了？从你的盘子里拿出来。除非你想“扭曲”你的比萨饼，把它折叠起来，它就会合身！我想你可以做的另一件事是把不合适的比萨饼切掉，然后它可能会起作用！ 如果我们缩小比萨饼，那会引起问题，因为这样它就适合盘子了，但盘子里并没有完全装满比萨饼

我使用上面的例子是因为从技术上讲，不可能按你的要求去做。 我可能误解了你的意思

我建议使用md-grid-list并将md-card指令放入网格中。 为网格提供所需的布局，并从卡中删除所有样式

我在尝试使用md卡进行扩展时遇到了类似的问题。相反，使用md网格限制它更容易使用

 <md-content layout-padding>
  <md-grid-list md-cols="2" md-gutter="0px" md-row-height="5.8:10">
    <md-grid-tile ng-repeat="cat in catalogs">
      <md-card md-ink-ripple>
        <catalog-select type="cat">
        </catalog-select>
      </md-card>
    </md-grid-tile>
  </md-grid-list>
</md-content>

注意：catalog select是一个自定义指令，它引用了templateUrl，但我将粘贴它们携带的代码，即：

<md-card-content>
  <img ng-src="{{ type.img }}"/>
    <md-card-title>
      <md-card-title-text>
        <h4> {{ type.year }} </h4>
        <h5> {{ type.title }} </h5>
      </md-card-title-text>
    </md-card-title>
  </md-card-content>

{{type.year}
{{type.title}}

我希望我的代码将卡片2保持在一行（或两列）中，因此：md cols=“2” 关于如何按照您的喜好调整md grid list指令的布局，有很好的文档：

希望这至少有帮助。 在md卡上使用flex=“33”似乎可行，但md卡的主要功能是外观而不是布局。他们为后者创建了网格列表

---

希望这能有所帮助。

这比你想象的要简单。由于您希望卡片保持其原始大小（因此它们不会扭曲图像），因此不应设置弹性百分比，而是让它们根据需要增减。要达到所需效果，请尝试以下操作：

<div layout="row" layout-align="center stretch" layout-wrap>

  <md-card ng-repeat="article in home.articles | filter:searchCard">
   ...
  </md-card>

</div>

...

卡片将只占用所需的空间，如果它们溢出了行，它们将被包装，因为布局包装属性。这并不能确保桌面上总是有3张卡，平板电脑上总是有2张卡，手机上总是有1张卡，但可以确保这些卡在屏幕上总是有足够的空间

如果你真的想有这样的布局，方法是：

<div layout="row" layout-align="center stretch" layout-wrap>

  <md-card flex="95" flex-gt-sm="45" flex-gt-md="30" ng-repeat="article in home.articles | filter:searchCard">
   ...
  </md-card>

</div>

...

因为信用卡有保证金，所以你必须设置一个较小的弹性百分比。因此，与flex=33%不同，您应该使用30%，而不是50%，使用45%（或者在CSS文件中手动将max width和flex basis设置为47%左右）

希望这有帮助