How to make Bootstrap 4 carousel images responsive?

Question

The scramble of the title and the demonstration say everything. The new Bootstrap 4 carousel does not respond. Images do not match their aspect ratio.

Does anyone know how to solve this problem without making big changes to css and html?

.wrapper { max-width:200px; width:100%; } 

 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="wrapper"> <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="First slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://placehold.it/400x200" alt="Third slide"> </div> </div> </div> </div> 

Answer 1

You don't need a wrapper or anything like that. The default setting for .active-carousel-item is to display: flex.

You will need to add

 .carousel-item.active, .carousel-item-next, .carousel-item-prev { display: block; } 

into your custom css.

Answer 2

Just add this below css,

 <style> .wrapper { max-width:200px; width:100%; } .carousel-item-next, .carousel-item-prev, .carousel-item.active { display: block !important; } </style> 

I hope it will work fine ...