Блог

 lt;div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"gt;  lt;div class="modal-dialog modal-dialog-centered" role="document"gt;  lt;div class="modal-content"gt;  lt;div class="modal-body"gt;    lt;div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"gt;  lt;div class="carousel-inner"gt;  lt;div class="carousel-item active"gt;  lt;img class="img-fluid" src="https://images.unsplash.com/photo-1520121401995-928cd50d4e27"gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img class="img-fluid" src="https://images.unsplash.com/photo-1544453850-ea0e8a9f2b68"gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img class="img-fluid" src="https://images.unsplash.com/photo-1468434453985-b1ca3b555f00"gt;  lt;/divgt;  lt;div class="carousel-item"gt;  lt;img class="img-fluid" src="https://images.unsplash.com/photo-1502439502085-ebf78244370a"gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;    lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt; lt;a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModal" role="button"gt;Open first modallt;/agt;  

Если я сделаю модальный полноэкранный режим, изображения будут прыгать вверх и вниз из-за их разного размера. Если я сделаю диалоговое окно vh-100, изображения останутся маленькими и все еще будут дрожать. Если я сделаю изображения vh-100, они выйдут за рамки размера экрана, появятся полосы прокрутки и все равно будут дрожать.

Как сделать так, чтобы размер изображений внутри карусели автоматически изменялся в соответствии с модальной высотой всего экрана с автоматической шириной без скачков вверх и вниз? Возможно ли это вообще с чистой загрузкой или требуется JS?