Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolvendo as imagens responsivas

Olá, pessoas. Depois de muitos testes e buscas, encontrei uma solução responsiva sem precisar ir cortar a imagem ou deixar um valor fixo no carrossel. Logo, imagens de qualquer tamanho vão funcionar, porém, bom senso é bom né?

Esse é o código que inseri no meu CSS

.carousel-inner .item img{
object-fit: cover;
width: 100%;
height: 100%;
}

.carousel-inner .item{
    height: 35vh;
    width: 100%;
    min-height: 200px;
}

Aqui eu obriguei a imagem a cobrir toda a área do carrossel, e defini um tamanho responsivo para a altura do carrossel, no caso 35vh que é uma altura referente à altura da tela e inseri um valor mínimo para que mesmo em dispositivos com a tela mais compacta a imagem não fique estreita demais. Assim, a altura será de acordo com o tamanho da tela do dispositivo, e as imagens são encaixadas de forma central. :) espero que ajude alguém

1 resposta
solução!

Alana, boa tarde!

Muito obrigado por compartilhar sua solução com a gente! Para que sua sugestão alcance mais alunos marque como solucionada!

Continue assim e bons estudos!