问题描述
我正在创建一个旋转木马来显示照片,照片的大小和方向可以不同。一切都非常好,除了显示一张大的垂直照片时,白色的小提示弄乱了我的网站。
如您所见,情况并不理想。与轮播一起显示时,我可以对它做些什么吗?还是在上载时以某种方式调整图像大小,在侧面添加白色条纹? (我不太热衷于调整照片的大小,它们很重要,因为该网站将要显示租赁报价)
HTML的片段:
<div class="row pb-3">
<div class="col-lg-9 ">
<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
<mdb-carousel-item *ngFor="let photoUrl of selectedRental.photoList">
<img class="d-block w-100" [src]="photoUrl" alt="missing photo">
</mdb-carousel-item>
</mdb-carousel>
</div>
<div class="col-lg-3 about-me">
...
</div>
</div>
解决方法
您将需要为轮播图像设置静态高度。
您说图像的大小不同,但是上传时不需要手动调整大小。我们可以使用object-fit: cover
,object-fit: fill
,object-fit: contain
,...等css在UI上正确显示它。