Ionique: étirement de l'image dans la carte de l'appareil largeur

Je suis en utilisant ionic framework.
Je suis en train d'étirer l'image dans la carte pour correspondre à la largeur de l'appareil.

S'appuyant sur l'exemple ici, voici mon code jusqu'à présent.

<div class="list card">

  <div class="item item-avatar">
    <img id="myImg" src="http://lorempixel.com/50/50/people">
    <h2>Pretty Hate Machine</h2>
    <p>Nine Inch Nails</p>
  </div>

  <div class="item item-image" id="image-container">
    <img src="http://lorempixel.com/400/400/sports">
  </div>

  <a class="item item-icon-left assertive" href="#">
    <i class="icon ion-music-note"></i>
    Start listening
  </a>

</div>

css

.item-image img:first-child {
  position: relative;
  width: 100vw !important;
  left: calc(-50vw + 50%);
}

Ici est le stylo que j'ai créé pour partager.

La question J'ai renvoyé.

Toute aide appréciée !!!

Voulez-vous votre image de débordement de la carte et être plein de navigateur-largeur?
Oui, vous l'avez droit.
comme ceci : codepen.io/anon/pen/bVBVox ???
Avez-vous essayé de supprimer les card classe à partir de vos cartes? La réponse posté fait le travail, mais il gâchera toutes les cartes dans votre application. Vous aurez besoin pour affiner vos cartes de correspondance souhaitée collection de cartes. d'ailleurs, je ne suis pas un grand fan de !importants 🙂
Je suis également pas fan de !importants :). Je vais avoir que l'amélioration de mon application. Merci pour la suggestion.

OriginalL'auteur vinesh | 2015-09-25

  1. 8

    J'ai ajouté ces quelques lignes de css pour obtenir le résultat recherché:

    Ajouter my-card de classe avec le card et puis,

    .my-card .item.item-image{
  width: 100vw;
  margin-left: -10px;
}

.my-card.card{
  overflow: visible;
}

    Fondamentalement, fait le débordement visibles sur la carte, et ajusté pour la carte des marges.

    Ici est le travail de la fourche de la plume !!!

    Cela a fonctionné comme un charme, Merci :))
    Évitez d'utiliser des !important. Si vous ne pouvez pas poster une solution qui n'utilise pas !important (sauf si vous avez réellement besoin de remplacer un très mauvais codé thème/plugin/cadre/etc.. qui utilise !important lui-même), envisager de ne pas répondre à cette question particulière. En outre, il est clair à partir de votre réponse que vous n'avez jamais travaillé avec ionic cadre. Votre sélecteurs CSS sont beaucoup trop large.
    Je suis d'accord qu'il serait intelligent pour ajouter une sorte de classes spécifiques au lieu d'utiliser ionique spécifique des sélecteurs.
    Aussi, je pense !important peut être nécessaire si vous écrasez ionique de styles déjà en place (comme je l'ai vu lors du travail avec le ionic framework)
    de mon expérience personnelle, de travail sur les moyennes et les grands projets: il est toujours préférable d'utiliser la plus longue et la plus spécifique des sélecteurs au lieu d'utiliser !important. S'il doit être utilisé, plus la raison pour utiliser vraiment très spécifique des sélecteurs, de sorte qu'il ne s'applique pas partout ailleurs, force de plus !importants.

    OriginalL'auteur Paul G