圖像適合flexbox中的屏幕

Bootstrap v4 beta 6更新爲使用display: flex爲其傳送帶項目。現在我的img項目最終以新的方式延伸或移動。我的應用程序應該適合每個圖像到視圖屏幕。基本思想是有max-height: 100%; max-width: 100%;，以便圖像受到視圖的限制，但保持正確的比例。圖像適合flexbox中的屏幕

有沒有人有關於安裝Flexbox或其項目到屏幕上的信息？這裏的任何幫助表示讚賞

這裏是我以前的那之前的Flexbox的更新工作（srry了NG-引導指令離開流模糊）

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%; 
}

來源

2017-01-19 austin

這種組合是附近完美：

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%; 
}

來源

2017-01-20 06:40:48 austin

圖像適合flexbox中的屏幕

回答

相關問題