Angular Material MD-Karte reagiert nicht

Question

Ich versuche, MD-Karte verwenden, um ein Raster von Artikelkarten zu erstellen. Auf großen Displays möchte ich, dass es 3 Karten breit, Tablet-Größe 2 Karten breit, Smartphone 1 Karte breit ist. Obwohl die Bilder nicht exakt die gleiche Größe haben, möchte ich, dass alle Karten die gleiche Größe haben, ohne das Bild zu verzerren.

Ich bin ratlos, wie dies zu erreichen ist. Ich möchte ernsthaft vermeiden, dass die Breite und Höhe der Codiersets für die Karten hart ist und dass sie stattdessen mit der Größe des Displays flüssig sein sollen. Ich denke, ich muss Flex-Attribute verwenden?

Dies ist, wie es jetzt aussieht:

Hier wird die Struktur meiner Karte Ansicht ist:

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

Einsicht darüber, wie diese Karten, die auf machen würde also so sehr geschätzt!

Answer 1

Sie für alle Bilder fragen möglicherweise zu unterschiedlich groß sein, während zur gleichen Zeit, um die Größe des Elements halten in sie existieren.

Denken Sie darüber. Wenn Sie ein Stück Pizza haben und es zu groß für Ihren Teller ist, wohin geht die zusätzliche Pizza? Von deinem Teller. Wenn du deine Pizza nicht "verzerren" willst, falte sie zusammen, dann passt sie! Ich denke, die andere Sache, die Sie tun können, ist die Stücke von Pizza schneiden, die nicht passen (crop), dann könnte es funktionieren! Wenn wir die Pizza schrumpfen, würde das Probleme verursachen, denn dann passt es die Platte, aber die Platte ist nicht komplett mit Pizza gefüllt.

Ich benutze das obige Beispiel, weil es technisch nicht möglich ist zu tun, was Sie fragen. Ich kann falsch sein, was Sie wollen.

Ich würde vorschlagen, md-Grid-Liste und setzen Sie die MD-Karte-Direktive in das Raster. Geben Sie dem Gitter das gewünschte Layout und entfernen Sie alle Formen von Ihren Karten.

Ich hatte ähnliche Probleme beim Versuch, MD-Karte zu skalieren. Stattdessen ist es einfacher, mit md-grid zu arbeiten.

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

Anmerkung: Katalog-select ist eine benutzerdefinierte Richtlinie, eine templateUrl verweist, aber ich werde den Code, den sie tragen, fügen Sie die:

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

ich meinen Code wollte die Karten zu halten also 2 in einer Reihe (oder zwei Spalten): md-cols = „2“ gibt es gute Dokumentation, wie das Layout der md-Grid-Liste Richtlinie einstellen, wie Sie mögen: https://material.angularjs.org/latest/api/directive/mdGridList

Hope this mindestens hilft. Mit der flex = "33" auf der MD-Karte scheint es wie es funktionieren würde, aber die primäre Funktion der MD-Karte ist für Looks nicht für Layout. Sie haben eine Grid-Liste für Letzteres erstellt.

Hoffentlich hilft das.

Answer 2

Dies ist einfacher als Sie denken. Da Sie möchten, dass Karten ihre ursprüngliche Größe behalten (damit sie das Bild nicht verzerren), sollten Sie nicht Flex-Prozentsatz setzen, aber lassen Sie sie wachsen und schrumpfen, wie sie brauchen.Um das zu erreichen den gewünschten Effekt, versuchen Sie folgendes:

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

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

</div> 

Karten wird nur so viel Platz in Anspruch nehmen, wie sie brauchen, und wenn sie die Zeile überlaufen, werden sie wegen der Layout-wrap-Attribut gewickelt werden. Dies stellt nicht sicher, dass Sie immer 3 Karten auf dem Desktop, 2 Karten auf dem Tablet und 1 Karte auf dem Handy haben, aber stellen sicher, dass die Karten immer so viel Platz haben, wie sie auf den Bildschirm passen.

Wenn Sie wirklich diese Art von Layout haben wollen, zu tun, die Art und Weise wäre es dies:

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

Da Karten einen Spielraum haben, können Sie eine der nächst kleineren flex Prozentsatz einzustellen haben. Statt flex = 33% sollten Sie also 30% verwenden und statt 50% 45% (oder setzen Sie die max-width und flex-basis manuell auf 47% oder so in Ihrer CSS-Datei).

Hoffe, das hilft.