占据所有图像中类的总高度和宽度答案

【问题标题】：Occupy the total height and width of the classes in all images占据所有图像中类的总高度和宽度
【发布时间】：2020-05-26 21:16:52
【问题描述】：

问题：

我创建了一个图像滑块，但我的问题是我无法填充 drop 和 abc 类的宽度和总高度 (100%)。

问题：

我怎样才能让所有图像占据整个区域而不损失其质量？

代码

<div class="col-md-6" style="overflow-y: auto;">
    <div class="drosp">
        <div class="c">
                <ng-template>
                    <ngb-carousel id="carousel" #carouse *ngIf="imagens" >
                        <ng-template *ngFor="let imgIdx of imagens; let i = index" [id]="i" ngbSlide>
                            <div class="picsum-img-wrapper">
                                <img [src]="imgIdx.Imagem" class="img-responsive">
                                </div>
                            </ng-template>
                        </ngb-carousel>
                    </ng-template>
                </div>
                </div>

【问题讨论】：

尝试添加背景图片而不是 ..
而不是使用 <img...> 你应该去添加例如一个完整的宽度/高度<div>element 并应用css设置background-image以及background-size设置为cover。
你在 img 上绑定了object-fit: cover 属性吗？
@newBee 你什么意思，你能帮帮我吗？
@StasAmasev 这不适用于所有图像

标签： html css angular typescript ng-bootstrap

【解决方案1】：

尝试添加这些样式：

ngb-carousel,
:host ::ng-deep ngb-carousel .carousel-inner,
:host ::ng-deep ngb-carousel .carousel-item,
:host ::ng-deep ngb-carousel .picsum-img-wrapper {
  height: 100%;
}

.img-responsive {
  obejct-fit: cover;
}

【讨论】：

完美！谢谢！

【解决方案2】：

你可以尝试改变吗：

<img class="img-responsive" [src]="imgIdx.Imagem" style="width: 100%; height: 100%; border-radius: 8px;">

收件人：

<img [src]="imgIdx.Imagem" style="height: 100%; width: auto; border-radius: 8px;">

【讨论】：

感谢帮助，但你还是看到了蓝色区域（即它仍然没有占据100%的区域）