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

Question

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

基于示例here，这是我目前的代码。

<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 是我创建用于分享的笔。

The question 我提到了 SO。

任何帮助表示赞赏!!!

Answer 1

我在你的 CSS 中添加了这几行以获得你想要的结果：

使用card 添加my-card 类，然后，

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

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

基本上，让溢出在卡片上可见，并根据卡片的边距进行调整。

Here 是笔的工作叉！！！