Oi.
Gostaria de saber, se o 'height:400px' setado na classe 'imagem-carrossel', faz alguma diferença na exibição da(s) imagem(ns). Ou se o 'object-fit:cover' faz com que a imagem preencha todo o tamanho de seu elemento pai.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi.
Gostaria de saber, se o 'height:400px' setado na classe 'imagem-carrossel', faz alguma diferença na exibição da(s) imagem(ns). Ou se o 'object-fit:cover' faz com que a imagem preencha todo o tamanho de seu elemento pai.
Fala ai Marcelo, tudo bem? O objeto-fit: coverfaz com que a imagem preencha o seu tamanho sem ficar distorcida, exemplo:
Imagine que você tem uma imagem original de 1280x720, ai no seu site você quer renderiza-la com 300x500.
.alguma-imagem {
height: 500px;
width: 300px;
}Nesse caso ela vai ficar distorcida, pois você está setando pouca largura e muito altura, ela vai ficar esticada.
Para resolver o problema, podemos definir o object-fit: cover
.alguma-imagem {
height: 500px;
object-fit: cover;
width: 300px;
}Agora a imagem irá renderizar sem distorcer, pois, ela vai encontrar a melhor maneira de preencher suas dimensões sem que a mesma fique esticada.
Espero ter ajudado.