3
respostas

Posicionamento de uma imagem no carousel

Minha dúvida tem relação com o posicionamento da imagem no carousel, eu quero centralizar a sua exibição no carousel, como o layout deve ser responsivo isso acaba desconfigurando a sua exibição quando a tela está maximizada, mostrando apenas parte da imagem. Como posso fazer que a o foco do carousel seja sempre o centro da imagem? Tentei fazer da maneira abaixo mas não funcionou.

#slides{
  max-height: 500px;
  overflow: hidden;
}
.carousel-item img{
  height: 100%;  
  width: 100%;  
  position:relative;
  top:.5;
}
3 respostas

Fala aí Jailson, tudo bem? Teria algum exemplo para dar? Ficaria mais fácil tentar lhe ajudar.

Fico no aguardo.

Tudo bem, vou tentar exemplificar. Tipo, a imagem é maior que o display do carousel, dessa forma, como a sua exibição não está configurada para exibir o centro da imagem e desconsiderar o que passar do display do carousel, acaba pegando só a parte de cima da imagem que cabe no display, eu estava tentando centralizar a imagem no display pra que ele mostrasse o centro da imagem e ignorasse o resto, ao invés de só a parte superior. Não sei se deu pra entender.

Bom, se for você que está fazendo o carousel, você pode trocar o img por div e usar o background, com algumas propriedades:

background-image: url(CAMINHO);
background-position: center;
background-repeat: no-repeat;
background-size: cover;

Isso pode ser definido em uma única linha com shorthand:

background: url(CAMINHO) center cover / no-repeat;

Espero ter ajudado.