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

You can do a typical use of margin, to improve your result centering your image.

.carousel-inner > .carousel-item > img {
margin: 0; //If you have images of very different sizes.    
max-width: 100%; }