如何删除＆＃34;填充＆＃34;来自离子卡

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和height 100%添加到img。

仅举例 -

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试使用“无填充”属性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>

Answer 4

在Ionic v5中，继为我工作之后， 我使用<ion-img>标签来渲染图像，并将class="no-padding card-background-page"设置为<ion-content>标签。

代码：

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

Answer 5

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

ion-card { font-size: 0; }