离子:将卡片中的图像拉伸到设备宽度

Question

我正在使用离子框架.我试图在卡片中拉伸图像以匹配设备宽度.

基于此处的示例,这是我的代码到目前为止.

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

这是我创建的笔分享.

我在SO上提到的问题.

任何帮助赞赏!

Answer 1

我将这几行添加到你的css中以获得你想要的结果:

添加my-card类card然后,

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

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

基本上,使卡片上的溢出可见,并根据卡片的边距进行调整.

这是工作的笔!