-1

Estou fazendo o esboço de um projeto e preciso colocar três imagens um uma "linha" só. Decidi usar o display:flex e o space-around para deixa-lás com um espaço entre elas, porém elas estão no tamanho fora do normal.

inserir a descrição da imagem aqui

HTML:

<header id="infos">
    <div class="logos">
        <img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>     
        <img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>
        <img src="http://3.bp.blogspot.com/-ELX7vcLVocE/Ubj2DSqw-1I/AAAAAAAACJs/rfJ2ZbWWbOs/s1600/5o.JPG" width="200"/>                 
    </div>
</header>

e o CSS:

*{margin: 0; padding: 0; box-sizing: border-box;}

body{
    background-color:rgba(127,255,30, 1);
    font-size: 18px;
    overflow-x: hidden;
}

#infos{
    max-width: 960px;
    padding: 3em;
    margin: 0 auto;
}

.logos{
    display: flex;
    justify-content: space-between;
}

queria que elas ficassem no seu tamanho normal

2
  • Aqui está no tamanho correto amigo, verifique se no seu css não tem alguma propriedade global afetando esses elementos Commented 6/10/2017 às 12:55
  • Defina o tamanho da imagem, no caso só é necessário o width, assim elas não serão distorcidas pelo flexbox. Commented 8/12/2020 às 21:55

3 Respostas 3

-2

Você pode aplicar na imagem

align-self: flex-start;

Dessa forma o flex não vai distorcer.

-3

Aparentemente as imagens estão ficando assim pois estão em um tamanho inatural graças ao flexbox. Uma forma de resolver isso é usando object-fit: cover ou object-fit: contain.

-3

só mudei a parte do .CSS de

.logos {
    display: flex;
    justify-content: space-between;
}

para

.logos {
    display: flex;
    justify-content: space-around;
}

Mas tanto faz, todos dois funcionam sem alterar a altura das imagem.

Coloquei seu código no https://jsfiddle.net/38cL1kow/1/ de uma olhada.

Talvez no seu .CSS completo possa existir alguma Class que esteja modificando a IMG.

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 1/03/2023 às 4:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .