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>