CODEWITHSUNDEEP
htmlcssflexbox
illusionpp
illusionpp

Reputation: 21

How to get and image to shrink with flexbox

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;
}
<div>
  <h1>
    Da bois
  </h1>
  <br>
  <h2>Introducing da Bois!
  </h2>

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


  <div class="flexbox-container">
    <div class="flexbox-item flexbox-item-1">

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


    </div>

    <div class="flexbox-item flexbox-item-2">

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


    <div class="flexbox-item flexbox-item-3">

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

    </div>

Upvotes: 2

Views: 514

Answers (3)

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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 class="flexbox-container">
    <div class="flexbox-item flexbox-item-1">

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


    </div>

    <div class="flexbox-item flexbox-item-2">

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

    <div class="flexbox-item flexbox-item-3">

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

 </div>

Upvotes: -1

user18307363
user18307363

Reputation: 1

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 class="container">
        <div class="image"><img src="Your-image.jpeg" alt=""></div>
        <div class="image"><img src="Your-image.jpg" alt=""></div>
        <div class="image"><img src="Your-image.png" alt=""></div>
        <div class="image"><img src="Your-image.jpg" alt=""></div>
        <div class="image"><img src="Your-image.jpg" alt=""></div>

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

Upvotes: 0

Abhishek Kokate
Abhishek Kokate

Reputation: 460

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

Upvotes: 4

Related Questions