Comment faire <img> et <md-carte> sensible dans angulaire du Matériel?

Je suis de l'affichage de contenu dynamique en boucle avec <md-card> et <image> balises. Mon résultat n'est pas réactif sur tablette ou mobile, écrans, montrant une barre de défilement au lieu de la ligne suivante. Quel est le problème avec mon code et comment puis-je répondre?

<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: Comment faire <img> et <md-carte> sensible dans angulaire du Matériel?

Comment faire <img> et <md-carte> sensible dans angulaire du Matériel?

OriginalL'auteur Prasad | 2015-07-07

  1. 9

    Cela peut aider votre cause.

    http://codepen.io/sstorie/pen/myJWxQ
    La clé est de ces deux classes ajouté à la mère et à l'img dans chaque carte

    .parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}
    Merci pour cette réponse, mais s'il vous plaît fournir le code source ici à StackOverflow ou vous pouvez créer un extrait ici au lieu de CodePen. Lire stackoverflow.com/help/how-to-answer

    OriginalL'auteur developer 2015

  2. 7

    Vous pouvez utiliser le flex(la largeur de la ligne, la hauteur de la colonne) attribut de déclarer md-taille de la carte et mise en page-wrap sur le conteneur parent. Mise en page-align pourrait 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.

    Matthieu Pouvez-vous Veuillez donner une Plunker avec quelques exemple ?
    Modification: <div layout="row" mise en page-marges > <div layout="row" mise en page-marges de mise en page-wrap mise en page-align="center">
    layout-wrap m'a aidé à obtenir ce que je voulais. Merci une tonne!

    OriginalL'auteur Matthew Hamu