Entrar Ainda não tem acesso?
3
respostas

Tag figure, grid e Bootstrap: por que a figure ocupou pixels a mais no meu grid?

por Ingrid Gehlen Felkl
| 25.1k xp | 6 posts
Programadora

Olá pessoal! Tudo certo? Espero que estejam conseguindo se cuidar! Estava codando aqui e me deparei com uma situação que me chamou atenção.

O código era o seguinte:

          <article class="col-12 container">
            <div class="row">
              <figure>
                <img class="col-6 produto-img" src="img/icones/analise.svg" data-anime="1400" class="fadeInDown" alt="Imagem que ilustra as ferramentas de análise">
              </figure>
              <div class="col-6" data-anime="1200" class="fadeInDown">
                <h3 class="produto-h3">Ferramentas de análise</h3>
                <p class="produto-p">Nesse momento, o digital se tornou imprescindível. Da mesma forma, o retorno com esse investimento é essencial. Por isso, os nossos sites contam com ferramentas de análise de dados, permitindo que você tenha relatórios completo de acessos.</p>
              </div>
            </div>
          </article>

Quando fui verificar, havia uma distância de +/-100px entre o texto e a imagem. A img tinha 469px de width, mas, contando com a tag figure, o total dava 540px de largura. Esse não era o layout que eu queria. Queria texto e imagem com, no máximo, 1rem de distância entre si.

Ok. Fiz uns testes e excluí a tag figure , deixando a imgfora de uma div específica. Dessa forma:

          <article class="col-12 container">
            <div class="row">
              <img class="col-6 produto-img" src="img/icones/analise.svg" data-anime="1400" class="fadeInDown" alt="Imagem que ilustra as ferramentas de análise">
              <div class="col-6" data-anime="1200" class="fadeInDown">
                <h3 class="produto-h3">Ferramentas de análise</h3>
                <p class="produto-p">Nesse momento, o digital se tornou imprescindível. Da mesma forma, o retorno com esse investimento é essencial. Por isso, os nossos sites contam com ferramentas de análise de dados, permitindo que você tenha relatórios completo de acessos.</p>
              </div>
            </div>
          </article>

E aí funcionou!

Mas eu não entendi a razão de ter funcionado =(.

Por que a figure ocupou esses pixels a mais no meu grid?

Aí, caí naquela questão que img que não estão em div ficam super pequenas e horríveis...

Ah, esqueci de dizer que o texto começou a vir por cima da img ainda por cima.

Valeu, gente!

3 respostas
por Ingrid Gehlen Felkl
| 25.1k xp | 6 posts
Programadora

Gente, fui fazer o que deveria ter feito antes: ler a documentação do Bootstrap.

Li que precisava adicionar uma classe para a minha imgchamada img-fluid. Isso resolveu o problema do texto ficar por cima da imagem, setando max-width: 100% e height: auto

por André Ferraz de Almeida
| 384.9k xp | 200 posts
Front-end Pleno

Opa Ingrid beleza? Eu ia falar justamente isso, tem esse rolê com o Bootstrap hahahaha

As imagens no bootstrap 4 tem uma classe específica pra cada tipo de imagem que você vai trabalhar (veja por exemplo que os cards possuem uma classe especial para imagem chamada card-img-top.

Geralmente quando for trabalhar com a tag <figure> será necessário utilizar uma das classes para imagens propostas pelo bootstrap (img-fluid, img-thumbnail, o text-hide para replacement de imagens e algumas outras). Esse link aqui do Bootstrap trata desta questão do figure: https://getbootstrap.com/docs/4.5/content/figures/

Se não quiser ficar presa a estas estilizações do bootstrap vc pode criar uma classe pra ti no CSS e setar a width do jeitinho que quiser (ai só basta retirar o img e img-fluid que você consegue estilizar sem forçar tão famoso !import).

Aproveitei que cê perguntou ai já achei bacana comentar alguma dessas coisas aqui que tava lendo um dia desses pra galera também ver, aprender e me ensinar também hehehe

por Ingrid Gehlen Felkl
| 25.1k xp | 6 posts
Programadora

Gente, consegui resolver isso de uma maneira mais simples do que eu pensava. Até achei que ficou meio gambiarra. Então, comentem se vocês também acharam meio gambiarra (kkkkk). O que eu fiz:

          <div class="d-flex justify-content-end col-sm-12 col-md-6 ">
            <img class="img-fluid produto-img" src="img/icones/analise.svg" alt="Imagem que ilustra algo">
          </div>
          <div class="col-sm-12 col-md-6">
            <h3 class="produto-h3">Título</h3>
            <p class="produto-p">texto.</p>
          </div>

Minha solução foi transformar a div da imgem flex e justificar o conteúdo ao final. Ficou exatamente como eu queria!