web-dev-qa-db-fra.com

Comment rendre <img> et <md-card> réactif dans angular Matériel?

J'affiche du contenu dynamique en boucle avec <md-card> et <image> Mots clés. Ma sortie ne répond pas sur les tablettes ou les écrans mobiles, affichant une barre de défilement au lieu de la ligne suivante. Quel est le problème avec mon code et comment puis-je le rendre réactif?

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

Captures d'écran: Desktop View

![Tab View and mobile nearly same

angularjsresponsive-designmaterial-designangular-material
8
Prasad

Cela peut aider votre cause.
http://codepen.io/sstorie/pen/myJWxQ La clé est ces deux classes ajoutées au parent et à l'img dans chaque carte

.parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}
9
developer 2015

Vous pouvez utiliser l'attribut flex (largeur pour la ligne, hauteur pour la colonne) pour déclarer la taille de la carte md et la mise en page sur le conteneur parent. La mise en page peut également aider votre cause.

<div layout="row" layout-margin layout-wrap layout-align="center center">
     <md-card flex="25"> //25% of parent
                //content 
     </md-card>
</div>

Consultez la documentation pour plus d'options.

7
Matthew Hamu