CODEWITHSUNDEEP
cssionic-framework
vinesh
vinesh

Reputation: 4913

Ionic: stretch image in card to device width

I am using ionic framework. I am trying to stretch the image in card to match the device width.

Based on the example here, here is my code so far.

<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%);
}

Here is the pen I created to share.

The question I referred on SO.

Any help appreciated !!!

Upvotes: 5

Views: 13723

Answers (1)

Paul G
Paul G

Reputation: 847

I added these few lines to your css to get your desired outcome:

Add my-card class with the card and then,

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

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

Basically, made the overflow visible on the card, and adjusted for the card's margins.

Here is working fork of pen !!!

Upvotes: 8

Related Questions