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中以获得你想要的结果：

使用my-card添加card课程，然后

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

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

基本上，可以在卡片上看到溢出，并调整卡片的边距。

Here正在努力工作!!!

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

CSS

1 个答案: