Изображение по размеру экрана во flexbox
Bootstrap v4 beta 6 обновлен для использования display: flex для своих карусельных предметов. теперь мой img предметы в конечном итоге растягиваются или перемещаются по-новому. мое приложение должно соответствовать каждому изображению на экране просмотра. основная идея состоит в том, чтобы иметь max-height: 100%; max-width: 100%; так что изображение ограничено видом, но сохраняет правильные пропорции.
У кого-нибудь есть информация по установке флексбокса или его элементов на экран? любая помощь здесь приветствуется
Вот мой предыдущий код, который работал до обновления 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>
CSS
html,body{height:100%;}
.carousel,.carousel-item,.active{height:100%;}
.carousel-inner{height:100%;}
img {
max-width:100%;
max-height:100%;
}
1 ответ
Эта комбинация почти идеальна:
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%;
}