Carousel Bootstrap [Resolvido]


(Makson Santos) #1

Boa noite a todos!
Estou tentando fazer um slide-show com o carousel do bootstrap. Na verdade, já consegui fazer, mas, as imagens que disponho são de tamanhos diferentes. Com isso, o slide fica passando as imagens de tamanhos diferentes.
MInha dúvida é: como faço para manter todas as imagens do carousel do mesmo tamanho? Mesmo sendo grandes ou não.
Grato pela ajuda!


(Diego Eis) #2

@makson_santos Cara, não tem muito o que fazer nesse caso: ou recorta no Photoshop ou faz um div que envolve a imagem, define um tamanho e coloca um overflow: hidden;

Será que alguém tem outra ideia mais inteligente aí?


(Daniel Marcos) #3

Com tamanhos diferentes realmente não tem o que fazer, a solução mais fácil seria editar a imagem antes da exibi-la no site. Outra dica, use essa ferramenta para diminuir o peso em KB https://tinypng.com


(Luã Ciceri Schwertner) #4

O mais fácil é editar as imagens e colocar todas no tamanho certo. Uma alternativa pode ser por ela como background e dar um overflow hidden.

Ex:

.slider {
    background: url(imagem.jpg) center no-repeat.
    height: 200px;
    overflow: hidden;
}

(Makson Santos) #5

Obrigado a todos! Minha dúvida era exatamente essa.


(Felipe Fialho) #6

Cara, tem uma solução um pouquinho diferente, mas pode funcionar caso o seu suporte seja navegadores mais modernos.

É possível você definir um tamanho fixo na div, como sugerido pelo @diegoeis.

Ai vem o pulo do gato, utilize a opção contain do object-fit, leia mais aqui.

Com isso suas imagens ficaram adaptadas ao box sem a necessidade de cortar em editores de imagens.


(Antonionscm) #7

vou dar o css
/*
* Start Bootstrap - Full Slider (http://startbootstrap.com/)
* Copyright 2013-2016 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
*/

.carousel,
.item,
.active {
height: 100%;
height: 500px;
}
.item img{
width: 100%;
height: 600px;
}
a.left{
box-shadow: 0px;
}
a.left:hover{
box-shadow: 0px;
}
.carousel-inner {
height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */

.fill {
width: 100%;
height: 400px;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

footer {
margin: 50px 0;
}