Stretched Image In Carousel Bootstrap

I am using Bootstrap 4. There I have a carousel with picture. The images keep showing stretched. Idk what's the problem. It looks like this: The original pic looks like this: Ca

Solution 1:

Instead of using object-fit: contain !important;, have you tried using object-fit: cover !important; to achieve your desired effect?

I am assuming you are wanting to place the background in a position where it will cover from left to right as well as top to bottom without morphing the image? For this I use background-size: cover; or object-fit: cover;.

Solution 2:

you can chnage the value of img height yo auto

.carousel-innerimg {
  position: absolute;
  top: 0;
  left: 0;
  height: auto
  object-fit: containt !important;
  display: block;
}

or add the width auto and keep the height value :

.carousel-innerimg {
  ....
  height: 32rem;
  ....
  width : auto; /* or 100% */
}