Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Quero aumentar o Width da imagem sem sobrepor uma por cima da outra.

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Selecionando Media Queries e atividade Media Queries

por SAUL HENRIQUE ARAUJO VASCONCELOS ANDRADE
| 11.4k xp | 11 posts

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeBoa tarde, será que alguém consegue me ajudar com esse problema? No curso, a instrutora deixa a imagem com Width de 100%, mas quero deixar a imagem com 150%, pra poder dar um destaque maior para o carrossel. O problema é que sempre que eu aumento a imagem, elas ficam se sobrepondo. Será que algum de vocês consegue me ajudar?

<section class="carrossel">
        <h2 class="carrossel__titulo">MAIS VENDIDOS</h2>
        <!-- Slider main container -->
        <div class="swiper">
            <div class="swiper-pagination">
            </div>
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
            <!-- Slides -->
                <div class="swiper-slide"><img src="img/Lideranc╠ºa.svg" alt="Livro sobre liderança em design"></div>
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre ApacheKafka"></div>
                <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre Portugol"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro sobre Front-End"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre Javascript assertivo"></div>
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre Acessibilidade"></div>
            </div>

.carrossel__titulo{
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}

.swiper-slide img{
    width: 150%;
}
3 respostas
por MARIA ISABEL TEIXEIRA
| 1044.8k xp | 2507 posts
Alura Scuba Team Monitora | Suporte Educacional | AWS & Azure Certified

Oii, Saul! Tudo bem?

O que acontece é que ao definir a largura da imagem para 150%, você está fazendo com que a imagem ocupe uma área maior do que o espaço disponível para ela, e isso causa a sobreposição.

Uma alternativa para resolver essa situação seria utilizar a propriedade object-fit: cover; no CSS. Essa propriedade faz com que a imagem preencha todo o espaço disponível, mantendo a proporção da imagem e evitando que ela se estique ou se sobreponha. Interessante, não é mesmo? Hehe.

Um exemplo prático:

.swiper-slide img {
    width: 150%;
    height: 100%;
    object-fit: cover;
}

No código acima, a imagem vai preencher 100% da altura disponível e vai tentar preencher 150% da largura, mas como usamos a propriedade object-fit: cover;, a imagem vai manter suas proporções e se ajustar ao espaço disponível sem se sobrepor.

Se mais dúvidas surgirem, fique à vontade para postar aqui no fórum! :D

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
por SAUL HENRIQUE ARAUJO VASCONCELOS ANDRADE
| 11.4k xp | 11 posts

Poxa, não funcionou pra mim :/

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

.swiper-slide img{
    width: 150%;
    height: 100%;
    object-fit:cover;
}
solução!
por SAUL HENRIQUE ARAUJO VASCONCELOS ANDRADE
| 11.4k xp | 11 posts

Para quem estiver olhando este post. Consegui uma ajuda que resolveu o meu problema em partes, ainda tenho problemas ao aumentar as imagens, pois elas acabam ficando cortadas. Entretando, me ajudaram a espaçar as imagens com o simples comando a seguir:

 <script> const swiper = new Swiper('.swiper', {
        spaceBetween: 80,
        slidesPerView: 3,

        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

      });
    </script>

Na linha do "spaceBetween" eu simplesmente aumentei o valor da função, o que fez a página ficar mais similar com a do Figma.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade