Image 图像适合flexbox中的屏幕

Image 图像适合flexbox中的屏幕,image,flexbox,carousel,twitter-bootstrap-4,Image,Flexbox,Carousel,Twitter Bootstrap 4,Bootstrap v4 beta 6更新为对其转盘项目使用display:flex。现在,我的img项目以新的方式延伸或移动。我的应用程序应该适合每个图像的查看屏幕。基本思想是拥有最大高度:100%;最大宽度:100%使图像受视图限制,但保持正确的比例 是否有人有关于将flexbox或其项目安装到屏幕上的信息?谢谢你的帮助 这是我以前在flexbox更新之前工作的代码(请注意ng bootstrap指令使流程模糊) html <html><body> <ngb-c

Bootstrap v4 beta 6更新为对其转盘项目使用
display:flex
。现在,我的
img
项目以新的方式延伸或移动。我的应用程序应该适合每个图像的查看屏幕。基本思想是拥有
最大高度:100%;最大宽度:100%使图像受视图限制,但保持正确的比例

是否有人有关于将flexbox或其项目安装到屏幕上的信息?谢谢你的帮助

这是我以前在flexbox更新之前工作的代码(请注意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>
<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>
这种组合近乎完美:

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