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.
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.