Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Imagens com tamanhos diferentes, como ajustar no Carrossel?

Olá pessoal! Segui a orientação da instrutora para montar o carrossel e usando as imagens do curso está funcionando bem. Porém quando uso imagens com tamanho diferentes, quando as imagens são trocadas, cada imagem aparece ocupando espaços diferentes. Como faço para fazer com que as imagens apareçam como se fossem do mesmo tamanho, sem distorcer a imagem? Segue o código:

<div id="carouselExampleCaptions" class="carousel slide" data-interval="3000" data-ride="carousel">

            <ol class="carousel-indicators">
               <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
               <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
               <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>

            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/img/pc-estetoscopio.jpg" class="d-block w-100">
                </div>

                <div class="carousel-item">
                    <img src="/img/solucao-ti.jpg" class="d-block w-100">
                </div>

                <div class="carousel-item">
                    <img src="/img/circuito-placa.jpg" class="d-block w-100">
                </div>
            </div>

            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Próximo</span>
              </a>
        </div>
2 respostas
solução!

Opa Ivo, tudo bem?

Você pode utilizar uma propriedade um pouco mais avançada do css, o object-fit, mais especificamente com o valor cover, aplicando na imagem. Segue documentação: https://www.w3schools.com/css/css3_object-fit.asp

Espero ter ajudado!

Olá, Adrian! Grato pela ajuda. Era isso mesmo que estava faltando.