I’m using the ng bootstrap in my angular project but I’ve a problem with its style.
Actually, it doesn’t display to the center but in the upper left corner:
I want it to be centered and wide under the blue headbar.
I tried to work with CSS but the only similar result I get is to manually set the image to be like that:
style="width: 100%; height: 877px"
But I think it’s not the best solution.
How can I do?
UPDATE WITH CODE:
<div class="carouselCont">
<ngb-carousel *ngIf="top10">
<ng-template *ngFor="let film of top10.items" ngbSlide >
<div class="picsum-img-wrapper" (click)="onClick(film)">
<img src="{{film.image}}" alt="Random first slide" style="width: 100%; height: 877px"/>
</div>
<div class="carousel-caption" (click)="onClick(film)">
<h3>{{film.rank}} - {{film.title}}</h3>
<p>{{film.year}}</p>
</div>
</ng-template>
</ngb-carousel>
</div>
2
Answers
Hi @Eliseo thanks for answering. I still have the same problem, it look like that:
how it looks
I modified the code as you suggested, so:
html
css
ts
I'd like to show images wide under the headbar and without need to scroll down to read caption. As I said, I'm able to obtain that result only setting a width to 100% and a fixed height...
a ngb-carousel, by defect is 100% width. You can use, e.g.
You also can "wait to load the first img and get the max-width the width of this image
And define:
(don’t forget the margin:auto in your .css)
stackblitz