How to get and image to shrink with flexbox

Question

I am new to programmin and that sort of stuff I am trying to make a website but the part im stuck on is trying to make a row of images that will shrink with the website when it shrinks. Instead the pictures get moved down when you shrink the browser. it works fine without the pictures but whenever i add the images it gets weird.

Here is the code

.flexbox-container {
  display: flex;
  flex-wrap: wrap;
}

.flexbox-item {
  width: 200px;
  border: 3px solid #333;
  background-color: white;
  border-radius: 100px;
  flex-grow: 0;
  flex-basis: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
}

.flexbox-container img {
  width: 100%;
  height: 30rem;
  display: inline-block;
}

.emo-issa {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius:100px;
}


  
    Da bois
  
  

  Introducing da Bois!
  

  
    First up we have got!

user_17349359 · Answer

You can add 'flex-wrap: nowrap;' to make flex item stay in single line. and make image

width: 100%;
height: fit-content;

to make image auto adjust the size

user_18307363 · Answer

you can use flexbox when you want to make responsive web (shrink web)and you can use

@media Query

.container {
    margin: 50px auto;
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.gambar {
    width: 25%;
}

.gambar img {
    width: 100%;
}

user_17007184 · Answer

Remove flex-wrap. Also, I removed so many codes from your code. no need to them:

.flexbox-container {
  display: flex;
}

.flexbox-item {
  width: 20%;
  height: 80vh;
  border: 3px solid #333;
  background-color: white;
  border-radius: 100px;
  flex-grow: 0;
  display: flex;
}

.flexbox-container img {
  width: 100%;
  height: 100%;
  border-radius: 100px;
}



    Da bois



Introducing da Bois!



    First up we have got!

How to get and image to shrink with flexbox

3 Answers