CODEWITHSUNDEEP
htmlcssimageflexbox
Drak432
Drak432

Reputation: 223

How can I change size of pictures in a flexbox?

I try to develop website for my portfolio. I want to do something like that : enter image description here

But I've some problem with the 3 icons for Twitter/Instagram and Deviantart. To put the icons like that, I use the flexbox in html. Currently, I've that :

#conteneur {
  display: flex;
  justify-content: space-between;
}
<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

Test with CodePen here : https://codepen.io/lucbenedet/pen/yLbPMgK

But as you can see, the pictures are too large and when I try to put the pictures to a size of 35px like that :

#conteneur
{
    display: flex;
    justify-content: space-between; 
    width: 35px;

}

or

.element1
{
    width: 35px;
}

The resize doesn't works...

Someone to show how to do that ?

Upvotes: 0

Views: 87

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105863

you can reset width on the flex-container to max-content (3 icones shouldnot overflow) and use gap to set a distance in between them.

You could use em for the gap and icon's width to have a coherent render.

Possible example:

#conteneur {
  display: flex;
  width: max-content;
  align-items: center;
  margin: auto;
  gap: 1.6em;
}

#conteneur div img {
  width: 3em;
}
<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

possible example from your codepen https://codepen.io/gc-nomade/pen/qBmVjBV

Upvotes: 1

Abdelrahman Hatem
Abdelrahman Hatem

Reputation: 1036

You can update your CSS with following code.

#conteneur {
  display: flex;
  justify-content: space-between;
  width: 150px;
  padding: 10px;
}

#conteneur div img {
  width: 35px;
  height: 35px;
}
<div id="conteneur">
  <div class="element1">
    <img src="https://zupimages.net/up/21/29/vbxh.png">
  </div>
  <div class="element2">
    <img src="https://zupimages.net/up/19/51/4gl0.png">
  </div>
  <div class="element3">
    <img src="https://zupimages.net/up/21/29/dbtc.png">
  </div>
</div>

You can have some space between icons when you maximize the width of the container

Upvotes: 2

Related Questions