Why <img/> in flexbox doesn't resize when applied centering?

Kuba Nowoszyński 0
Viewed 32

I try to center an img inside a flexbox and make it resizable. When I apply centering with align-self: center or margin: auto, it keeps the same size for all resolutions. When I remove centering, it resizes perfectly (but then it's not centered :v).

Any ideas what I did wrong?

EDIT: I solved it with {width:100%; max-width:800px/for me/}

//SASS
.hero {
  display: flex;
  flex-direction: column;
  img {
     max-width: 792px;
    align-self: center;
  }
}
//React

<section className="hero">
      <img src={collage} />
      <h1>Online Experiences</h1>
      <p>
        Join unique interactive activities led by one-of-a-kind hosts—all
        without leaving home.
      </p>
    </section>

flexbox css
1 Answers

For example this is your html code:

<html>

<body>
    <div class="container">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
    </div>
</body>

</html>

Now add these CSS code can help you:

.container {
        display: -webkit-flex;
        -webkit-flex-wrap: wrap;
        display: flex;
        flex-wrap: wrap;
        background-color: grey;
}

img {
        width: 100%;
}

div {
        flex: 1;
        padding: 10px;
        margin: 10px;
}

Thus, this is whole code, HTML and CSS:

<html>

<head>
    <style>
        .container {
            display: -webkit-flex;
            -webkit-flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
            background-color: grey;
        }

        img {
            width: 100%;
        }

        div {
            flex: 1;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
        <div class="image">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" />
        </div>
    </div>
</body>

</html>

Hope this help you.

Good Luck.

userC8Sd10
Related