Flexbox lets images resize

Asked

Viewed 190 times

1

I am doing the sketch of a project and need to place three images a "line" only. I decided to use the display:flex and the space-around to leave you with a space between them, however they are in the size out of 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>

and the 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;
}

I wanted them to stay in their normal size

html css

  • Here is the correct size buddy, make sure your css does not have any global property affecting these elements

  • Set the image size, in case only the width is required, so they will not be distorted by flexbox.

1 answer

0

You can apply in the image

align-self: flex-start;

That way the flex won’t distort.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.