How to make bootstrap carousel image responsive?

Question

I want to keep the same ratio of the images. The problem is it streches when the browser is wide. and squezes when it\'s reduced.

I have checked all SO question here

Answer 1

I made these adjustment to bootstrap.css at lines 5835 - 5847:

.carousel-inner {
  position: relative;
  /* Removed height here */
  overflow: hidden;
}

.carousel-item {
  position: relative;
  width: 100vh;
  height: 100vh;
  display: none;
  width: 100%;
}

Worked like a champ!