2

Estou tentando adicionar minhas imagens, que tem as dimensões de 700 x 400, ao carousel do bootstrap. E queria que o carousel tivesse exatamente essas dimensões também. Porém, quando tento fazer isso, a imagem diminui para 280 x 400, como na imagem abaixo, e o carousel vai para 700 x 400, como desejado.

inserir a descrição da imagem aqui

Meu HTML:

<section id="sliderhome">
    <div id="meuSlider" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-1.png" alt="Imagem 1">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-2.png" alt="Imagem 2">
                </div>
            </div>
            <div class="item">
                <div class="div-img-carousel">
                    <img src="img/produtos/prod-3.png" alt="Imagem 3">
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#meuSlider" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#meuSlider" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</section>

Meu CSS:

@media(min-width: 1024px) {
    .div-img-carousel, .item.active {
        overflow: hidden;
        width: 700px;
        height: 400px;
        margin: 0 auto;
    }

    .carousel-inner {
        width: 40%;
    }

    #meuSlider {
        width: 700px;
        height: 400px;
    }

}

Como faço para deixar a imagem do tamanho do carousel?

Obrigado!

4 Respostas 4

1

Voce ja deu uma olhada no JS??? Existe um arquivo Js do carousel que vc define alguns atributos.. dá uma verificada se nao é isso.

Outra coisa posta os outros atributos do css do carousel nao adianta vc definir só na classe da imagem o tamanho, se a outra div tem um tamanho menor.. Faz um teste só para desencargo, coloca os atributos de tamanho da imagem na própria tag da imagem pra ver se ele muda.. caso nao mude é pq tem uma outra classe que esta definindo e controlando o tamanho total do seu carousel.

6
  • Olá Paulinha, os únicos atributos que declarei para o carousel foi no css postado mesmo, os outros são do próprio bootstrap. E também já fiz as outras tentativas como pediu, mas não deu certo.
    – Raphael
    21/09/2016 às 13:56
  • Oi raphael , localiza a classe item active, carousel-inner e o id MeuSlide.. posta as configurações deles.. caso nao tenha no teu css principal cria essas classes e coloca as configurações que tu desejas e ve se ele aceita.. ou cria uma classe tipo novotamanho com a largura que tu desejas e declara apos carousel slider. Eu to meia atucanada agora mas vou ver se consigo fazer aqui pra ti e posto o codigo mais tarde.
    – Paulinha
    21/09/2016 às 15:52
  • Fiz a edição. Tinha esquecido de colocar a '.carousel-inner', e adicionei também #meuSlider e a .item.active, mas o resultado é o mesmo da imagem acima. :(
    – Raphael
    21/09/2016 às 19:32
  • Bom como nao consigo fazer teu codigo agora tenta duas coisas
    – Paulinha
    21/09/2016 às 20:03
  • Primeiro: coloca depois dos valores widht e height como !important se vc tentou e ainda nao funcionou dai ali no .carousel-inner colocar 100% ou auto ve se da certo.. mas tenta a primeira opcao primeiro.
    – Paulinha
    21/09/2016 às 20:06
-1

Faça assim que funciona.

<img style="height: 400px; width: 700px;" .....

-2

Testa isso no seu CSS, talvez resolva.

Basicamente, estou utilizando os seletores para definir as dimensões de uma img dentro das classes do carousel, que é responsivo quanto a isso.

Espero ter ajudado.

.carousel-inner > .carousel-item > img {
  width: 700px;
  height: 400px; 
}

-3

e só usar a class="w-100...-75...-30"

1
  • 1
    Poderia esclarecer melhor para o autor da pergunta porque você acredita que isso resolverá o problema? Ou mostrar com um Fiddle? 26/04/2019 às 10:54

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 .