Изображение для установки экрана в flexbox

Bootstrap v4 beta 6 обновлен для использования display: flex для своих элементов карусели. теперь мои img предметов в конечном итоге растягиваются или перемещаются по-новому. мое приложение должно соответствовать каждому изображению на экране просмотра. основная идея состоит в том, чтобы иметь max-height: 100%; max-width: 100%;, так что изображение ограничено видом, но поддерживает правильные пропорции.Изображение для установки экрана в flexbox

Есть ли у кого-нибудь информация об установке гибкой коробки или ее элементов на экран? любая помощь здесь ценится

вот мой предыдущий код, который работал до обновления Flexbox (srry что нг-самозагрузки директива оставляет поток расплывчатое)

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

ответ

Смежные вопросы