1
resposta

Não consigo deixar meus cards com as dimensões corretas

essa é minha estrutura de cards (só não adicionei ainda a responsividade das imagens, mas creio que já era pra estar funcionando corretamente). mas as imagens dos cards não ficam com as dimensões reais da imagem. por exemplo, a dimensão real da imagem é 160px de largura e 157px de altura. porém, no site, a imagem fica com dimensão de 190px por 190px:

<div class="container row mx-auto g-4">
    <div class="col-6 col-md-4 col-xxl-2">
        <div class="card">
            <img src="imagens/boné.png" class="card-img-top" alt="">
                <div class="card-header bg-black text-bg-dark">
                    <p class="text-center card-text">Categoria </p>
                </div>
        </div>
</div>
1 resposta

Olá, João!

Isso ocorre também no código da aula, portanto não se preocupe, o Bootstrap possui comandos que visam sempre a responsividade. Ao definir o tamanho que um determinado card ocupará, a responsividade é considerada, alterando o tamanho da imagem. Observe o código da aula para que você possa aprimorar o seu.

<div class="col-6 col-md-4 col-xxl-2">
      <div class="card rounded-0 border-0">
        <img class="d-md-none d-block" src="./assets/Mobile/categorias/categoria-calcados.png"
          alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
        <img class="d-none d-md-block d-xl-none" src="./assets/Tablet/categorias/categoria-calcados.png"
          alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
        <img class="d-none d-xl-block" src="./assets/Desktop/categorias/categoria-calcados.png"
          alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
        <div class="card-header bg-black text-bg-dark">
          <p class="text-center card-text">
            Calçados
          </p>
        </div>
      </div>
    </div>
  

O código acima está com a responsividade já ativada, outro ponto importante é que a imagem deve se ajustar conforme o tamanho da tela. Se limitarmos o tamanho ddela, pode ficar muito grande, em telas menores.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!