1

I have a Bootstrap 4 image carousel.

Some of the images are landscape view, some are portrait.

I'm using the .img-fluid class on all the carousel images, which applies max-width: 100%; and height: auto; to the images.

The landscape view images looks fine, but the portrait images are taller, which makes the carousel inconsistent, since the height is set to auto.

Is there an easy way I can apply some CSS to make the height of all my carousel images consistent, without distorting the taller portrait images?

This question didn't help me with this issue.

Ethan Ryan
  • 467
  • 10
  • 16
  • You can apply a fixed width to the container so all the imges stay within. – Rainbow Jun 15 '18 at 03:32
  • @ZohirSalakCeNa the problem is the tall, portrait images. Applying a fixed width to the container doesn't fix this issue, and applying a fixed height will override the `height: auto` of the .img-fluid class. – Ethan Ryan Jun 15 '18 at 03:36
  • 2
    You can have different images with different heights and expect them to be responsive, height auto is the issue here, you either set a fixed height and width on the container and max-height/width on the images. – Rainbow Jun 15 '18 at 03:42
  • Thanks @ZohirSalakCeNa, solved this by adding `height` to the container and `max-height` to the `.img-fluid` class. – Ethan Ryan Jun 15 '18 at 04:38
  • That was a typo i meant `can't`, Anyway happy to help :) – Rainbow Jun 15 '18 at 06:06

0 Answers0