изображение в карусели angular/bootstrap не центрируется

Я пытался поместить изображения в центр страницы. Я попытался выровнять содержимое по центру, а также выровнять элементы по центру, но ничего не работает. Также не работает margin auto (что обычно работает). Я попытался установить аналогичные стили для div, содержащего изображение, но без изменений. Я знаю, что могу добавить поля, но возникают и возникают проблемы, когда я устанавливаю цвет фона страницы, поэтому мне нужно другое решение. Дайте мне знать, если у вас есть какие-либо идеи, спасибо!

 <ngb-carousel *ngIf="images" [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
  <ng-template ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>


img {
    width: 50vw;
    height: 80vh;
    margin-left: auto;
    margin-right: auto;
}

angular css angular-bootstrap bootstrap-carousel
person st123    schedule 12.10.2020    source источник
comment
таким образом, ваше изображение будет растягиваться, но если это нормально для вас, и вы хотите только центрировать его, то сделайте блок отображения изображения, вот и все, остальное вы уже применили   -  person Atul Rajput    schedule 12.10.2020
comment
@AtulRajput, как мне избежать растяжения?   -  person st123    schedule 12.10.2020
comment
есть 2 способа избежать растяжения, 1-й и лучший - не задавать высоту и ширину изображениям, давайте оставим его как есть, исходный размер изображения, 2-й - если вы хотите придать ему высоту и ширину, а затем дать ему объект -пригонка: крышка   -  person Atul Rajput    schedule 12.10.2020

Ответы (1)


arrow_upward
1
arrow_downward

Оберните карусель внутри элемента div с отображением flex. Что-то вроде этого.

<div class="carouselCont">
<ngb-carousel *ngIf="images" [showNavigationArrows]="true" [showNavigationIndicators]="true">
  <ng-template class="imageSlider" ngbSlide *ngFor="let image of images">
    <div class="picsum-img-wrapper">
      <img [src]="getImageLink(image)" alt="Random slide">
    </div>
  </ng-template>
</ngb-carousel>
</div>

Применяемый стиль css класса carouselCont должен быть

.carouselCont{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    height:100vh;
}

Таким образом, ваша карусель будет выровнена по центру экрана по горизонтали и по вертикали. Не нужно задавать vh/vw или поля для самого изображения с единственной целью выравнивания карусели по центру (таким образом ваши изображения будут растягиваться/сжиматься при разных разрешениях экрана)

Спасибо.

person Obaid    schedule 12.10.2020