图像在离子载玻片内没有拉伸，出了什么问题？

Question

我想让图像占据所有 space 但它没有这样做。我的 scss 代码：

.slider-div {

    width: 100%;
    height: 280px;
    position: relative;


    ion-slides {
        position: relative;
        background: black;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        --bullet-background-active: white;

        ion-slide {
            width: 100%;
            height: 100%;
            ion-img  {
                opacity: 0.6;
                width: 100%;
                height: 100%;
            }
        }


    }

我已经尝试过其他建议，例如设置图像的最小宽度和最小高度，但没有奏效。通常提供 100% 宽度和高度它需要所有 space.

我的HTML:

<div class="slider-div">
  <ion-slides pager (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let item of sortedList; let i = index">
      <ion-img class="image" [src]="item.url" *ngIf="item.type == 0"></ion-img>
    </ion-slide>

  </ion-slides>

  </div>

Answer 1

最后我把它设置为div的背景:

<div class="image" *ngIf="item.type == 0" [style.background-image]="'url(' + item.url + ')'"></div>

图像在离子载玻片内没有拉伸，出了什么问题？

Image is not stretching inside a ion slide, what is going wrong?

html

css

ionic4