5

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 !!!

Community
  • 1
  • 1
vinesh
  • 4,745
  • 6
  • 41
  • 45
  • Do you want your image to overflow the card and be full-browser-width? – tao Sep 25 '15 at 21:33
  • Yes, you got it right. – vinesh Sep 25 '15 at 21:34
  • like this : http://codepen.io/anon/pen/bVBVox ??? – Diptox Sep 25 '15 at 21:36
  • Have you tried removing the `card` class from your cards? The answer posted does the job, but it will mess up all the cards in your application. You'll need to narrow down your cards to match the desired collection of cards. besides, I'm not a big fan of `!important`s :) – tao Sep 25 '15 at 21:46
  • @AndreiGheorghiu I'm also not fan of `!important`s :). I will have that improved in my app. Thanks for suggestion. – vinesh Sep 25 '15 at 21:57

1 Answers1

8

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 !!!

vinesh
  • 4,745
  • 6
  • 41
  • 45
Paul G
  • 829
  • 7
  • 11
  • Avoid using `!important`. If you cannot post a solution that does not use `!important` (unless you actually need to overwrite a very bad coded theme/plugin/framework/etc.. that uses `!important` itself), consider not answering that particular question. Besides, it's clear from your answer that you never worked with `ionic` framework. Your CSS selectors are way too broad. – tao Sep 25 '15 at 21:50
  • I would agree in that it would be smart to add some sort of specific classes in place of using ionic specific selectors. – Paul G Sep 25 '15 at 21:58
  • Also, I think !important can be necessary if you are overriding ionic's styles already in place (as I've seen when working with the ionic framework) – Paul G Sep 25 '15 at 22:02
  • Ahhh sweet :) glad you were able to get it sorted – Paul G Sep 25 '15 at 22:04
  • 1
    @PaulG: from my personal experience, working on medium and large projects: it is always better to use longer and more specific selectors instead of using `!important`. If it must be used, more the reason to really use very specific selectors, so it doesn't apply anywhere else, forcing more `!importants`. – tao Sep 25 '15 at 22:21