[Dúvida] imagens simétricas | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por JULIANO PEREIRA DA ROSA

| 96.2k xp | 188 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

| 3697.8k xp | 7821 posts

Alura Scuba Team Apoio Educacional - Alura

14/03/2023

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

| 96.2k xp | 188 posts

14/03/2023

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

por Renan Lima

| 3697.8k xp | 7821 posts

Alura Scuba Team Apoio Educacional - Alura

17/03/2023

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