Des cartes avec différentes taille des images dans ionique

Je suis à l'aide de cartes pour afficher les images. Dans une rangée, je suis en train de montrer deux ou trois images. Le nombre d'images dans une rangée, vous pouvez changer. Les tailles d'images sont différentes. Ils n'ont pas la même hauteur et la largeur. De ce fait, la carte de hauteur est également en train de changer.

Je veux avoir la même hauteur pour toutes les cartes, même si les tailles d'image sont différentes. Et quand nous glisser la taille de l'écran, les images et les cartes de la hauteur et la largeur de ce qui devrait changer dans la même proportion.

J'ai essayé de fixation de la hauteur de chaque carte à une hauteur fixe dans les pourcentages. J'ai joué avec le positionnement, les cartes et les images aussi. Mais quand je fais glisser de nouveau l'écran de l'image ou de la carte de hauteur ne change pas dans la même proportion. Il doit avoir la même carte de hauteur indépendamment de l'appareil ou navigateur ou les images dans la carte.

Le code, c'est comme cela

<div class="row">
  <div class="col-50">card content here</div>
  <div class="col-50">card content here</div>
</div>
<div class="row">
  <div class="col-33">card content here</div>
  <div class="col-33">card content here</div>
  <div class="col-33">card content here</div>
</div>

Jetez un oeil à la codepen

Peut quelqu'un m'aider sur ce point?

OriginalL'auteur Rajeshwar | 2015-06-10

  1. 7

    J'ai joué un peu avec votre css.

    Essayez d'ajouter ce code dans votre css:

    .col-50, .col-33 {
  display: flex;
}
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.item-avatar, .item.tabs {
  flex: 0 0 auto;
}
.item-body {
  flex: 1 1 auto;
}

    Préfixé codepen ici http://codepen.io/vkjgr/pen/jPwqMx

    Espère que ça aide 😉

    Tout semble bon. Mais si j'ai des images de petite taille, la carte n'est pas en alignant parfaitement. J'ai ajouté un css ligne width:100%".une carte de classe, et tout lui semble bon. Si vous souhaitez voir le scénario ci-dessus, ouvrez http://codepen.io/rajeshwarpatlolla/pen/pJwEVW et supprimer width:100% de".une carte de classe, vous voyez le problème. Si nous avons width:100%".une carte de la classe, puis il a l'air bien. Merci d'ajouter cette ligne de css pour votre réponse ainsi que pour votre codepen. Je vais accepter cette réponse. Parce que les gens peuvent se référer à cette solution, il devrait donc avoir une solution parfaite. Enfin merci pour votre solution.
    Et j'ai compris encore une question. Toutes les cartes de toutes les lignes ne sont pas d'égale hauteur. Chaque ligne de la carte de hauteurs sont les mêmes, mais la hauteur de cartes dans une rangée sont changent en fonction de la hauteur de l'image de cette ligne. Il pourrait être mieux si nous pouvons faire toutes les cartes dans toutes les lignes d'égale hauteur.
    Bon 🙂 j'ai ajouté l'attribut width de l'échantillon et codepen.
    U peut faire toutes les cartes de même hauteur indépendamment des images dans toutes les lignes?

    OriginalL'auteur Veiko Jääger