Question

我对bootstrap传送带组件有问题，该组件正在从API获取图像，并且每次渲染时，图像的大小都不相同，因为它们以原始大小进行渲染，这导致了网站外观非常糟糕。

现在我记得当我过去使用它时，它会自动以与其他图像相同的大小渲染每个图像，而无需设置样式。

那是HTML文件：


<ngb-carousel
  #carousel
  interval="3000"
  [pauseOnHover]="pauseOnHover"
  (slide)="onSlide($event)"
>
  <ng-template ngbSlide *ngFor="let img of images; index as i">
    <div class="carousel-caption">
      <h3>{{ img.name }}</h3>
    </div>
    <a
      href="https://www.google.fr/?q=Number+{{ i + 1 }}"
      target="_blank"
      rel="nofollow noopener noreferrer"
    >
      <div class="picsum-img-wrapper">
        <img [src]="img.img" alt="My image {{ i + 1 }} description" />
      </div>
    </a>
  </ng-template>
</ngb-carousel>

TS文件：

import { Component, OnInit, ViewChild } from "@angular/core";
import {
  NgbCarousel,
  NgbSlideEvent,
  NgbSlideEventSource
} from "@ng-bootstrap/ng-bootstrap";
import { Sale } from "../../../models/sale";
import { SalesService } from "../../../services/sales.service";

@Component({
  selector: "app-carousel",
  templateUrl: "./carousel.component.html",
  styleUrls: ["./carousel.component.css"]
})
export class CarouselComponent implements OnInit {
  sales: Sale[];
  images = [];

  paused = false;
  unpauseOnArrow = false;
  pauseOnIndicator = false;
  pauseOnHover = true;

  @ViewChild("carousel", { static: true }) carousel: NgbCarousel;

  togglePaused() {
    if (this.paused) {
      this.carousel.cycle();
    } else {
      this.carousel.pause();
    }
    this.paused = !this.paused;
  }

  onSlide(slideEvent: NgbSlideEvent) {
    if (
      this.unpauseOnArrow &&
      slideEvent.paused &&
      (slideEvent.source === NgbSlideEventSource.ARROW_LEFT ||
        slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)
    ) {
      this.togglePaused();
    }
    if (
      this.pauseOnIndicator &&
      !slideEvent.paused &&
      slideEvent.source === NgbSlideEventSource.INDICATOR
    ) {
      this.togglePaused();
    }
  }

  // images = [944, 1011, 984].map(n => `https://picsum.photos/id/${n}/900/500`);

  constructor(public ss: SalesService) {}

  ngOnInit() {
    this.ss.getSales().subscribe(sales => {
      this.sales = sales;

      this.sales.forEach(s => {
        console.log(s)
        this.images.push({ img: s.img, name: s.name });
      });

    });
  }
}

我尝试用css文件自己设计样式，但是并没有改变很多... 我将@import "~bootstrap/dist/css/bootstrap.css";复制到style.css文件，如果有关系... 为什么不渲染所有相同大小的图像？

角引导程序大小调整问题

0 个答案: