How to get and image to shrink with flexbox-CodePudding

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


    <!DOCTYPE html>
<html lang="en">

<head>
    <title> Da Bois!</title>

    <link rel="stylesheet" href="CSS">



</head>

<div >

<body>

    <div>
        <h1>
            Da bois
        </h1>
        <br>
        <h2>Introducing da Bois!
        </h2>

        <h3>
            First up we have got!
        </h3>


<div >
    <div >

        <div><a  href="issastat.html"> <img  src="images/issa-small.jpg"
            alt="emo ass guy "></a></div>
   

        </div>
        
    <div >
        
        <div><a  href="issastat.html"> <img  src="images/issa-small.jpg"
            alt="emo ass guy "></a>  </div>
    </div>


    <div >
        
        <div><a  href="issastat.html"> <img  src="images/issa-small.jpg"
            alt="emo ass guy "></a>
    </div>

</div>


.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;
        
                }
                
                .flexbox-container img{
                  width: 100%;
                  height: 30rem;
                  display: inline-block;
                }
              }
      
}
.emo-issa{
   width: 100%;
   height: 100%;
   flex-shrink: 0;  
    border-radius:100px;
    

}

.flexbox-item-1 {
    flex-shrink: 1;

}
.flexbox-item-2 {
    flex-shrink: 1;
  
}
.flexbox-item-3 {
    flex-shrink: 1;
 
}

CodePudding user response：

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

CodePudding user response：

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%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="your-css.css">
    <title>Galery</title>
</head>
<body>

    <div >
        <div ><img src="Your-image.jpeg" alt=""></div>
        <div ><img src="Your-image.jpg" alt=""></div>
        <div ><img src="Your-image.png" alt=""></div>
        <div ><img src="Your-image.jpg" alt=""></div>
        <div ><img src="Your-image.jpg" alt=""></div>

    </div>
</body>
</html>

CodePudding user response：

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

<div>
<h1>
    Da bois
</h1>
<br>
<h2>Introducing da Bois!
</h2>

<h3>
    First up we have got!
</h3>


<div >
    <div >

      <div>
        <a href="issastat.html"> <img  src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
      </div>


    </div>

    <div >

      <div>
        <a href="issastat.html"> <img  src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
      </div>
    </div>

    <div >

      <div>
        <a href="issastat.html"> <img  src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
      </div>

 </div>