Question

Bootstrap v4 beta 6已更新为使用display: flex作为其轮播项目。现在我的img物品以新的方式伸展或移动。我的应用程序应该适合每个图像到视图屏幕。基本的想法是让max-height: 100%; max-width: 100%;使图像受到视图的限制，但保持正确的比例。

是否有人有关于将flexbox或其项目装入屏幕的信息？感谢任何帮助

这是我以前的代码在flexbox更新之前有效（srry表示ng-bootstrap指令使流程模糊不清）

HTML

<html><body>
<ngb-carousel id={{directory}}>
<template ngbSlide *ngFor="let what of whatList">
    <img class="mx-auto d-block" [src]=what>
</template>
</ngb-carousel>
</body></html>

CSS

html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
img {
max-width:100%;
max-height:100%;
}

Answer 1

这个组合 near perfect：

<强> HTML

<html><body>
<div class="container-fluid">
<div class="row"
<div class="col pl-0 pr-0"
  <ngb-carousel id={{directory}}>
  <template ngbSlide *ngFor="let what of whatList">
    <img class="mx-auto" [src]=what>
  </template>
  </ngb-carousel>
</div></div></div>
</body></html>

<强> CSS

img {
  object-fit: contain;
  max-height:100vh;
  max-width:100%;
}

图像适合flexbox中的屏幕

1 个答案: