En bootstrap, estoy tratando de hacer una galería de imágenes para nuestra página web. Estamos usando la última versión de bootstrap y tenemos nuestras imágenes, pero solo hay una cosa. Nuestras imágenes son de diferentes tamaños y cada vez que cambia a la siguiente imagen, cambia todo el tamaño de la galería. Me preguntaba si había una manera de tener solo espacios en blanco o espacios en negro para llenar el área que no cambia el tamaño de la galería.
<h2>Galleries</h2> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/Gallery_1.jpeg" class="d-block w-100" alt="Thompson Machinery"> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Thompson Machinery</h5> </div> </div> <div class="carousel-item"> <img src="images/Gallery_2.jpeg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Second slide label</h5> </div> </div> <div class="carousel-item"> <img src="images/Gallery_3.jpeg" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Third slide label</h5> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div>esto te ayudara supongo
Envolviendo imágenes dentro de un contenedor
<div class="image-container"> <img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="..."> </div>y dar propiedades de alto y ancho a ese contenedor
.image-container{ width: 500px; height: 500px; } *, *::before, *::after { box-sizing: border-box; } body{ min-height: 100vh; position: relative; display: grid; place-content: center; } .image-container{ width: 500px; height: 500px; border: 1px solid blue; display: grid; place-content: center; } img{ max-width:100%; display: block; } <h2>Galleries</h2> <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="image-container"> <img src="https://source.unsplash.com/random/300x150" alt="Thompson Machinery"> </div> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Thompson Machinery</h5> </div> </div> <div class="carousel-item"> <div class="image-container"> <img src="https://source.unsplash.com/random/400x500" class="d-block w-100" alt="..."> </div> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Second slide label</h5> </div> </div> <div class="carousel-item"> <div class="image-container"> <img src="https://source.unsplash.com/random/200x300" class="d-block w-100" alt="..."> </div> <div class="carousel-caption d-none d-md-block"> <h5 class="galleryCaptions">Third slide label</h5> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </div>