如何从Ionic卡片中移除“padding”

Question

我正在尝试在ionic卡片中插入图片。我选择使用卡片是因为我想保持纵横比一致。问题是，正如您可以在下一个图像中看到的那样，在图像后面的卡片底部有一个白色空间（在这里更明显，但也存在于顶部和侧面）：

我尝试使用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>

任何提示？

- kankamuso

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>

- arshcaptano

Answer 2

首先，永远不要将负值分配给 padding，因为它不起作用。如果您需要使用负值，则请使用 margin。

其次，请尝试将 img 的 width 和 height 添加为 100％。

例如：

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

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

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

- frnt

---

谢谢，我将高度和宽度都增加了100％，但没有任何变化。似乎只是增加宽度就足够了，因为卡片会垂直调整大小以适应图像比例。 - kankamuso

@kankamuso 在你上面的 img 标签中添加 min-height:100%，然后尝试一下，或者创建一个可工作的代码示例。 - frnt

嘿，我刚刚尝试了你建议的边距，在与0像素填充相结合时确实有效。现在它是这样的<div class="item item-body" style="margin-bottom: -5px;padding: 0px">。非常感谢！ - kankamuso

欢迎 @kankamuso，很棒的是通过将边距赋值为负值解决了问题 :-) - frnt

Answer 3

在 Ionic v5 中，以下方法适用于我， 我使用了 <ion-img> 标签来渲染图片，同时我将 <ion-content> 标签的 class="no-padding card-background-page"。

Code:

<ion-content class="no-padding card-background-page">
    <ion-card>
        <ion-img src="assets/img/yourimg.jpg"></ion-img>
    </ion-card>
</ion-content>

- k33da_the_bug

Answer 4

最终我找到了解决方案。我正在使用Ionic 5。

ion-card { font-size: 0; }

- MVDeveloper1

Answer 5

尝试使用“no-padding”属性，https://ionicframework.com/docs/layout/css-utilities 或者新的（因为该属性已被弃用）“class =“ no-padding”。

<ion-card class='no-padding'>
  <ion-card-header class='no-padding'>
    <img src='...' />
  </ion-card-header>
  <ion-card-content class='no-padding'>
    Some content
  </ion-card-content>
</ion-card>

- Mattias

---

与此同时，它已更改为ion-no-padding，请参见https://ionicframework.com/docs/layout/css-utilities#content-space。 - Aldin Bradaric