Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] imagens simétricas

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Desafio: crie uma página currículo!

por JULIANO PEREIRA DA ROSA
| 103.5k xp | 190 posts

Boa noite estou tentando deixar todas as imagens simétricas em um trecho de código, porem sem sucesso, alguém pode me dar uma dica?

 <div class="arvore">
            <div> <img src="./assets/medico3.jpg " alt="árvore da vida" class="arvore">
            </div>
            <div> <img src="./assets/medico2.jpg " alt="árvore da vida" class="arvore">
            </div>
            <div> <img src="./assets/medico.jpg " alt="árvore da vida" class="arvore">
            </div>
            <div> <img src="./assets/medico4.jpg " alt="árvore da vida" class="arvore">
            </div>
        </div>

o css seria esse

 .arvore {
        border-radius: 25px;
        border: 2px solid #bfc20e;
        padding: 10px;
        margin-bottom: 37%;
    }
3 respostas
solução!
por Renan Lima
| 4241.6k xp | 9015 posts

Olá Juliano, tudo bem?

Para deixar as imagens simétricas, você pode definir uma largura máxima para a div que contém as imagens e, em seguida, definir a largura das imagens como 100%. Dessa forma, todas as imagens terão a mesma largura e altura, tornando-as simétricas.

Você pode adicionar o seguinte código CSS:

.arvore {
  border-radius: 25px;
  border: 2px solid #bfc20e;
  padding: 10px;
  margin-bottom: 37%;
  display: flex;
  justify-content: space-between;
  max-width: 800px; /* ajuste o valor de acordo com o tamanho desejado */
}

.arvore img {
  width: 100%;
  height: auto;
}

Espero ter ajudado e bons estudos!

por JULIANO PEREIRA DA ROSA
| 103.5k xp | 190 posts

muito obrigado, com alguns ajustes no css cheguei ao resultado esperado.

por Renan Lima
| 4241.6k xp | 9015 posts

Opa, Qua legal Juliano. Fico feliz em poder ajudar e por ter dado certo.