Ionic: stretch the image to the width of the map to the device

Question

I use an ionic structure. I am trying to stretch the image in the card according to the width of the device.

Using 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 for sharing.

The question I was talking about is SO.

Any help is appreciated !!!

Answer 1

I added these few lines to your css to get the desired result:

Add my-card class with 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 map and adjusted for the map fields.

The pen plug works here !!!