如何从离子卡中去除“填充”

Question

我正在尝试在离子卡中插入 inamges。我更喜欢使用卡片，因为我想保持方面的一致性。问题是，正如您在下一张图片中看到的，在一张图片之后的卡片底部有一个空白区域（这里更明显，但也出现在顶部和侧面）：

我试过使用 CSS 但没有运气。部分原因可能是我不知道涉及哪个 CSS。另外，我真的不知道如何删除这样的空白。我什至尝试使用负填充值，但它不起作用，所以我认为它不是真正的卡片组件，而是正在解决问题的子部分。

这是我当前的代码：

<div class="card" ng-controller="cycleImagesCtrl">
    <div class="item item-body" style="padding: 0px 0px 0px 0px;">
        <img src={{imgTitle}} width="100%" />
    </div>
</div>

任何提示？

Answer 1

为您的卡片的 css添加margin: 0 !important;和padding: 0 !important;。像这样：

ion-card {
width:100%;
height:300px;
margin: 0 !important;
padding: 0 !important;
}

ion-card > img {
 width: 100%;
height: 100%;
}

<ion-card>
<img src="...">
</ion-card>

Answer 2

请参阅第一条，您永远不应该分配负值，因为padding它不起作用。如果您需要使用负值，请使用margin，

第二次尝试将width和heightof添加100%到您的img.

仅举个例子——

#parent{
  width:500px;
  height:300px;
}

#parent > img{
  width:100%;
  height:100%;
}

<div id="parent">
<img src="https://source.unsplash.com/random">
</div>