How do I auto-resize an image to fit a 'flex-box' container?

Question

How do you auto-resize a large image so that it will fit into a smaller width flex container whilst maintaining its width:height ratio?

Also, the solution must not relate on vw / vh, so that on a page there can be more in addition to this component.

Here's how it should look like:

Here's my code:

body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  flex: 0 0 100px;
  background-color: cornflowerblue;
}
.content {
  text-align: center;
}
.image {
  width: 100%;
  height: 100%;
}
.footer {
  flex: 0 0 100px;
  background-color: cornflowerblue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Images Are Weird</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header"></div>
      <div class="content">
       <img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
      </div>
      <div class="footer"></div>
    </div>
  </body>
</html>

The solutions I found here do not help

How do I auto-resize an image to fit a 'div' container? (not flex context)
Resize images to fit display:flex divs (fixed size for the image, I need dynamic size)

noob kid noob kid · Accepted Answer · 2019-10-02T07:20:28

Just change the image class width to less than 100% like 50% 60% or 70;

body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  flex: 0 0 100px;
  background-color: cornflowerblue;
}
.content {
  text-align: center;
}
.image {
  width: 50%;
  height: 100%;
}
.footer {
  flex: 0 0 100px;
  background-color: cornflowerblue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Images Are Weird</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="header"></div>
      <div class="content">
       <img class="image" src="https://villagesquare.me/wp-content/uploads/2018/07/Facebook-Square.png" alt="square placeholder" />
      </div>
      <div class="footer"></div>
    </div>
  </body>
</html>

How do I auto-resize an image to fit a 'flex-box' container?

2 Answers