3
respostas

Tamanho das imagens no Carousel

Bom dia.

Segui o exemplo do Carousel utilizando as imagens disponibilizadas que possuem tamanhos diferentes entre si. Como já mencionado em outro tópico de dúvida, quando há a rolagem das imagens o Carousel muda de tamanho devida às diferenças de dimensões das imagens. O amigo resolveu o problema transformando as imagens todas para a mesma dimensão, porém pergunto se não é possível resolver este problema de modo automatizado pelo Boostratp. Ademais, percebo que quando a imagem tem uma largura "pequena", fica sobrando um espaço vazio a direta do Carousel. Há alguma forma de resolver também este problema?

3 respostas

Tenta encapsular todas as imagens em um container (via css) e atribui a seus filhos width: 100%.

Alternativamente, atribuir a todas suas imagens class = minhas-imagens com sua respectiva declaração em css pode facilitar.

Documentação do Bootstrap sobre imagens responsivas pode te ajudar, também.

Certo. Seguindo a dica, como estou usando o Bootstrap 3 coloquei a classe .img-responsive que dentre outras propriedades seta a altura como

height:auto

assim, tive que setar um tamanho fixo para o componente pai "carousel-inner", coloquei

max-width:400px.

O único porém é que em dispositivos com tela menor eu vou ter que fazer media query para mudar esta max-width e não sei se seria a melhor prática.

Algo que eu procuro fazer ao desenvolver é começar pelo mobile. Jogo meu navegador em uma tela pequena, vejo o que fica bom ali, e escalo para telas maiores. O Sérgio Lopes tem um curso interessantíssimo sobre isso.

Aliás, usar tamanhos relativos também pode ajudar. Suponho que você desenvolveu seu site em um navegador que usa fonte padrão 20px. Logo, nesse caso, 1rem = 20px. Os seus 400px poderiam ser traduzidos, então, em 20rem. Dessa forma, você mantém a proporção desejada, independente do tamanho de fonte utilizado pelo usuário, e talvez até dispensando a media query.