1

Estive procurando alguma opção mas não encontrei de como configurar a resolução do carousel.

Vou dar um exemplo. Tenha essa imagem: inserir a descrição da imagem aqui

No carousel ela fica assim: inserir a descrição da imagem aqui

Existe alguma maneira de deixa-la inteira, ou uma maior parte?

Essa configuração existe no carousel? Ou tem que ser feita pelo css?

Meu código do carousel:

<section id="main-slider" class="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="carousel-content">
                        <h1>Horticultura Sustentável</h1>
                        <p class="lead">Horticultura Sustentável</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="container">
                    <div class="carousel-content">
                        <h1>IAC</h1>
                        <p class="lead">Lala <br>lala</p>
                    </div>
                </div>
            </div>
        </div><!--/.carousel-inner-->
        <a class="prev" href="#main-slider" data-slide="prev"><i class="icon-angle-left"></i></a>
        <a class="next" href="#main-slider" data-slide="next"><i class="icon-angle-right"></i></a>
    </section>

CSS:

#main-slider {
  background-image: url(../images/slider-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  padding: 200px 0;
  color: #fff;
}
3
  • Pode postar os códigos?
    – user21847
    Commented 19/02/2015 às 23:34
  • @Natan,postei,perdão Commented 19/02/2015 às 23:41
  • Aplique as classes img-rounded e img-responsive nas imagens do carousel. Se não funcionar aplique o código CSS deste JSBIN: jsbin.com/sefilorewu/1/edit
    – user21847
    Commented 19/02/2015 às 23:53

1 Resposta 1

1

Você pode aplicar as classes img-rounded e img-responsive.

Em alguns casos pode não funcionar, mas você pode contornar o problema sobrescrevendo o estilo padrão do bootstrap.

Você deve definir o min-width das imagens como 100% pra que ele acompanhe o tamanho da sua DIV pai e um position: relative para ter a referência do carousel-inner.

Ficando:

.carousel-inner > .item > img {
    position-relative;
    min-width: 100%;
    height: 200px; /* Altura da imagem dentro do Carousel */
}

Exemplo no JSBIN: http://jsbin.com/sefilorewu/1/

1
  • Cara valeu mesmo!!! Já tinha tentado de todo jeito e não conseguia redimensionar as imagens do carousel como eu queria, agora deu!
    – user33469
    Commented 30/09/2015 às 4:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .