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％左右）。

希望這可以幫助。