How to keep an image with flex-grow or flex-shrink (row and column)?

Question

I have a parent container with class flex and two child containers (one with class img-container-1 and the other with img-container-2) with an image inside:

and in the CSS:

.flex {
  display: flex;

  width: 100%;
  height: 100vh;
  background-color: aqua;
}

.img-container-1 {
  flex-grow: 1;
  background-color: brown;
}

.img-container-2 {
  flex-grow: 1;
  background-color: burlywood;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

I set a flex-grow of 1, to the img-container-1 / 2, as there is space available, both are filled equally, I also specify that the images occupy the entire width and height, this will take the height and width of the containers img-container-1 / 2 (right?), not the main container flex, as well as assigning an object-fit: contain, so that the aspect ratio is kept, and this is what I get (and it is what I wanted to achieve):

now I want to achieve the same, but vertically (column), therefore, to the container with the class flex I set flex-direction: column but I do not get the same result (I don't want this result):

.flex {
  display: flex;
  flex-direction: column; /*I set column*/
  width: 100%;
  height: 100vh;
  background-color: aqua;
}

How can I do this:

I tried flex-grow or flex-shrink but I don't understand, I hope you can help me, (the result that you see in the last gif I achieved by placing a high of 50% to the img-container- 1 / 2, but it can be done in another way or I am forced to do it with percentages - %).

user_8885988 · Answer

I'd suggest using the background-image instead of your current approach, that way the only thing that changes the direction is the flex-direction on your container and the images adapt since your items inside are adapting.

.flex {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: aqua;
  flex-direction: column;
  overflow: hidden;
}

.container-1 {
  background-color: brown;
  background-image: url('https://cdn.pixabay.com/photo/2021/06/27/14/32/raspberry-6368999_960_720.png');
}

.container-2 {
  background-color: burlywood;
  background-image: url('https://cdn.pixabay.com/photo/2021/06/27/14/32/raspberry-6368999_960_720.png');
}

.img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; 
  height: 100%;
  width: 100%;
}

.flex {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: aqua;
  flex-direction: row;
  overflow: hidden;
}

.container-1 {
  background-color: brown;
  background-image: url('https://cdn.pixabay.com/photo/2021/06/27/14/32/raspberry-6368999_960_720.png');
}

.container-2 {
  background-color: burlywood;
  background-image: url('https://cdn.pixabay.com/photo/2021/06/27/14/32/raspberry-6368999_960_720.png');
}

.img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center; 
  height: 100%;
  width: 100%;
}

How to keep an image with flex-grow or flex-shrink (row and column)?

1 Answers