0

我目前正在制作一个网页，并且我也在为 Angular Material Card 大小和 Angular Material Carousel 大小而苦苦挣扎。

我尝试为这两个元素添加许多不同的属性，但这里似乎没有任何作用。

该卡目前看起来像这样。

看起来很可怕。我希望卡片更小，轮播也更小，并且图像适合轮播，至于现在，图像显示为裁剪，因为一半以上的图片看不到。

任何想法如何解决这一问题？

代码如下：

<div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="15px">
  <mat-card style= "width: fit-content;" class="results">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{myShowLodgment.Name}}</mat-card-title>
      <mat-card-subtitle>Estrellas: {{myShowLodgment.NumberOfStars}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <mat-carousel [hideArrows]="false" [hideIndicators]="false" timings="200ms ease-in" [autoplay]="true"
        interval="4000" color="white">
        <mat-carousel-slide *ngFor="let slide of myShowLodgment.Photos" overlayColor="#ffffff" [hideOverlay]="false">
          <img [src]="slide" alt="">
        </mat-carousel-slide>
      </mat-carousel>

      <p>
        <b>Descripción</b>: {{myShowLodgment.Description}}
        <br>
        <b>Dirección</b>: {{myShowLodgment.Address}}
        <br>
        <b>Precio por noche</b>: ${{myShowLodgment.PricePerNight}}
        <br>
        <b>Precio total</b>: ${{myShowLodgment.TotalPrice}}

      </p>

      <mat-card-actions>
        <button *ngIf="canBook(myShowLodgment.IsFull)" mat-stroked-button color="primary" disabled>Alojamiento sin
          capacidad!</button>
        <button *ngIf="!canBook(myShowLodgment.IsFull)" mat-stroked-button color="primary"
          (click)="submitBooking(myShowLodgment.Id)">Reservar!</button>
      </mat-card-actions>
    </mat-card-content>
  </mat-card>
</div>

感谢您的时间，任何帮助表示赞赏。

4

1 回答 1

1

尝试更改此行从bootstrap.min.css更改高度和宽度之前

.carousel { position: absolute;height:100%;min-height: 100%;width:100%; }
.carousel-inner { position: relative; width: 100%; height:100%;min-height: 100%;}
.carousel-inner>.item {height:100%;min-height: 100%; position: relative; display: none; -webkit-transition: .6s ease-in-out left; -o-transition: .6s ease-in-out left; transition: .6s ease-in-out left;width:100%; }
.carousel-inner>.item>a>img, .carousel-inner>.item>img { line-height: 1 }
于 2020-11-15T03:40:05.733 回答