Angular Material md卡无响应

Question

我正在尝试使用md-card创建商品卡网格。 在大型显示器上，我希望它的宽度为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>

关于如何使这些卡具有响应性的任何见解都将受到如此的赞赏！

Answer 1

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

考虑一下。 如果您有一片披萨，而且对您的盘子来说太大了，那么多余的披萨会放在哪里？ 下车了。 除非您想“扭曲”您的披萨，否则将它折叠起来，这样就可以了！ 我猜您可以做的另一件事是将不适合的披萨切掉（裁剪），然后可能会起作用！ 如果我们将比萨饼收缩，则会引起问题，因为它适合盘子，但盘子中的比萨饼并不完全装满。

我使用上面的示例，因为从技术上讲，您无法执行所要求的操作。 我可能误会了您想要什么。

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

尝试使用md卡进行缩放时，我遇到了类似的问题。 相反，使用md-grid对其进行限制更容易使用。

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

我希望我的代码将卡2连续（或两列）放置：md-cols =“ 2”，有很好的文档说明如何调整md-grid-list指令的布局： https： //material.angularjs.org/latest/api/directive/mdGridList

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

希望这会有所帮助。

Answer 2

这比您想像的要简单。 由于您希望卡片保持其原始大小（因此它们不会使图像变形），因此您不应设置柔韧性百分比，而应根据需要让它们增大和缩小。 要获得所需的效果，请尝试以下操作：

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

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

</div>

卡将仅占用所需的空间，并且如果它们使行溢出，则它们会由于layout-wrap属性而被包装。 这不能确保您始终在台式机上拥有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>

由于卡片有边距，因此您必须设置下一个较小的弹性百分比。 因此，您应该使用30％而不是flex = 33％，而不是50％使用45％（或在CSS文件中手动将max-width和flex-basis设置为47％左右）。

希望这可以帮助。