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 found it best to remove the following.

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
}

and in .carousel remove:

height: 500px;

and in .carousel .item remove

 height: 500px;

for me this made the image work the way I wanted it to but be sure to insert an image in your html first or else I think it will just collapse into nothingness if you are working locally.

edit: Another user suggested I add this
Please Note that if the image shows grey bars on either side or even on one side, I'd recommend keeping

.carousel-inner > .item > img {
    min-width: 100%;
}