Imagens de diferentes tamanhos

Atualização: as imagens eu consegui padronizar usando um redimensionador na web. Porém os contornos delas ficam alguns desajustados. Ainda não entendi o por quê, pois o código é basicamente igual ao o do curso.

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover { border-color: #FF0084; }

.produtos li:active { border-color: #088C19;}

.produtos li:hover h2 { font-size: 34px; }

.produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descricao { font-size: 18px; }

.produto-preco { font-size: 22px; font-weight: bold; margin-top: 10px; }

Fala ai Renan, tudo bem? Para deixar as imagens todas com o mesmo tamanho você precisa definir um tamanho fixo para delas (height e width).

Tente definir algo assim:

img {
    height: 200px;
    object-fit: cover;
    width: 200px;
}

Espero ter ajudado.

Bom dia, Matheus. Tudo bem?

Muito obrigado por sua ajuda, Matheus. Quanto a resolução das imagens em si eu consegui resolver. O problema é que eu criei um contorno nelas (inseri 9 itens na lista) e esse contorno não está apresentando um padrão, ficando um maior do que o outro e sem espaçamento. Aonde estou errando?

As imagens em si, consegui colocar num determinado padrão, porém o que não consigo padronizar é o contorno, que ficam dos mais diversos tamanhos.

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 0.5%; padding: 30px 15px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

Posso estar errado, mas acredito que o erro esteja nessa parte do CSS mas não consigo enxergar aonde.

Fala Renan, falando assim é complicado, contorno você diz box-shadow ou border? Se sim, por estar com tamanhos diferentes é porque o elemento que está recebendo esse contorno está com tamanho dinâmico.

Você precisa definir um height e width fixo para ele seja com max-width ou width direto.

Espero ter ajudado.

O border, Matheus... vou tentar isso, se não der certo volto aqui. Muito obrigado

Bom dia, Renan. Se ainda não tiver conseguido, veja se a quantidade de texto não está muito diferente de um produto para o outro. Se tiver um parágrafo a mais, a borda será alterada junto.

Deu certo, pessoal! Consegui ajustar a página definindo o heigth e o width "travados". Muito obrigado pelas dicas!

Boa Renan, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.