角度/引导轮播中的图像不居中答案

【问题标题】：image in angular/bootstrap carousel doesn't center角度/引导轮播中的图像不居中
【发布时间】：2021-01-26 11:36:08
【问题描述】：

我一直在尝试将图像置于页面中心。我尝试在中心对齐内容并在中心对齐项目，但都不起作用。保证金自动也没有（通常确实有效）。我尝试为包含图像的 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;
}

【问题讨论】：

这样，你的图片会被拉伸，但是如果你没问题，只想居中，那就做图片显示块，就这样，剩下你已经申请了
@AtulRajput 如何避免拉伸？
有两种方法可以避免拉伸，第一种最好是不要给图像指定高度和宽度，保持原样，图像的原始大小，第二种是如果你想给它的高度和宽度，然后给它 object-fit: cover

标签： css angular angular-bootstrap bootstrap-carousel

【解决方案1】：

用 flex 将你的轮播包裹在一个 div 中。像这样的。

<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>

carouselCont类应用的css样式应为

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

这样您的轮播将与屏幕中心水平和垂直对齐。无需为图像本身提供 vh/vw 或边距，仅用于在中心对齐轮播（这样您的图像将在不同的屏幕分辨率下被拉伸/收缩）

谢谢。

【讨论】：