3
respostas

Imagens com tamanhos diferentes

Como as imagens possuem tamanhos diferentes, conforme eu mudo de imagem, o carousel aumenta e diminui verticalmente na tela.

Esse é o trecho do código do carousel.

<section>
            <h2 class="container titulo-depoimentos">Depoimentos de clientes</h3>

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="img/depoimentos/depoimento1.png" alt="">
              <div class="carousel-caption">
                <h3>Yuri Padilha</h3>
                <p>Gostei muito e achei rápido o serviço.</p>
              </div>
            </div>
            <div class="item">
              <img src="img/depoimentos/depoimento2.png" alt="">
              <div class="carousel-caption">
                <h3>Fernando Stafaneni</h3>
                <p>Excelente trabalho.</p>
              </div>
            </div>
            <div class="item">
              <img src="img/depoimentos/depoimento3.png" alt="">
              <div class="carousel-caption">
                <h3>Caio Sauzas</h3>
                <p>Gostei, competência em primeiro lugar.</p>
              </div>
            </div>
          </div>

          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        </section>
3 respostas

Fala ai Bianca, tudo bem? O que você tentar fazer é utilizar a propriedade object-fit com o valor cover.

Assim a ideia é que as imagens se adaptem ao tamanho da box e preencham todo o seu tamanho.

Espero ter ajudado.

Não deu certo. Qual parte do codigo html deve estar com essa propriedade object-fit? Tentei colocar em diversas partes da section "depoimentos" e não deu certo.

Fala Bianca, o object-fit deve ser aplicado nas imagens, ou seja, no img.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software