CODEWITHSUNDEEP
htmlcss
user3868641
user3868641

Reputation: 162

Bootstrap carousel images and sizes

I'm trying to show a responsive carousel. I have in the slideshow horizontal and vertical images (H size: 1400 x 935. V size: 624 x 935).

Problem appears in this project: https://www.luismatera.art/las-matas-via-muerta-i.html

The main problem is that text goes up and down each time the slide changes to horizontal to vertical.

I have this css code (provided here):

.carousel-fade .carousel-item, .carousel-item img {max-height: 90vh;}

and this in src image:

class="d-block img-fluid"

But it doesn't work properly

Could anybody help me to keep the text always in the same position? (like this)

Thanks in advance.

Upvotes: 0

Views: 55

Answers (1)

Cesar Correchel
Cesar Correchel

Reputation: 513

The images vary in height, so try to also add a min-height that way there's some consistency when changing images:

.carousel-fade .carousel-item, .carousel-item img {
   max-height: 90vh;
   min-height: 90vh;
}

Upvotes: 1

Related Questions