Image inside responsive flex box issue

Question

I was trying to have the plant image to fit inside the flex boxes with a responsive height and width when the screen size changes, but it doesn't seem to work. Also it changed the shape of the flex box to fit the image size which isn't what I was going for. The image should fit exactly in the flex box without changing its shape and still be responsive. What am I doing wrong? Anything helps, thanks.

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
	font-family: "Open Sans", Arial, sans-serif;
	background-color: #fefefe;
	padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: center;}
.flex-post {
  background-color: #f1f1f1;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex: 1 0 auto;
  height: auto;
  max-width: 275px;
  align-items: center;
  justify-content: center;
  display: flex;}
.flex-post:before {
  content: '';
  float: left;
  padding-top: 100%;}
.flex-post:hover {
  background-color: rgba(1, 1, 1, 0.5);}


.heart{
    position: relative;
    width: 55px;
    height: 45px;
    float: left;
}
.heart:before,
.heart:after{
    position: absolute;
    content: "";
    left: 24px;
    top: 0;
    width: 25px;
    height: 40px;
    background: white;
    -moz-border-radius: 25px 25px 0 0;
    border-radius: 25px 25px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after{
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

img {max-width:100%;}

<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>Cole Gwoz</p> 
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container">
  <div class="flex-post">
    <img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1">
  </div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

Answer 1

You can just set the the container to relative and item to absolute position. As it is the pseudo element holds the dimensions in each box in your example.

.flex-post {
  ...
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  max-width: 100%;
}

In addition, if you need the image to always cover each box no matter what size the image is, you can use object-fit property. Or, use background instead of inline images for better browser supports background-size: cover;.

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Answer 2

This may just be a wild guess but have you tried using background-size: contain; instead of background-size: cover;

The cover property has a tendency to resize and stretch images.

Answer 3

I'm not sure if you're talking about the plant image or the profile image, but I think you mean the plant. What I've done might be what you're after, I'm not sure. I just took out all your code to show you how the plant image will respond to the browser size. Hope that's useful. Not sure I've really answered your question.

img {
  height: auto;
  width: 100%;
}

<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1">