How to force an image to shrink to fit in flexbox?

Question

I have been searching for a solution to this problem for almost two weeks now and I am still completely lost. I'm making a simple landing page and I don't want any scrolling. I need a header followed by a bootstrap row containing a paragraph and an image. Here is my ms paint example:

Simple enough right? Well I can not for the life of me figure out how to get that image to shrink to fit into that row. Here is what is happening to me now. Note: When you run the snippet on stackoverflow the window is to small. It is easier to see whats going on with the JSFiddle

body, html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
}

.content {
}

img {
  height: 100%;
}

h1 {
  background-color: white;
}

.banner {
  height: 90%;
  background-color: red;
}


          


  
    Header
  

  
     Hello World

Result

The part that throws me off is that the .row extends beyond it's parent container .banner. How do we force this to stay inside that red area?

I've messed with object-fit, flex-grow, flex-shrink, a flex-basis and none of these seem to create the desired behavior. I'm going insane trying to figure this problem out. Maybe flexbox is the wrong tool to use here? But I'm trying to take advantage of the bootstrap grid system's media queries. Thanks in advance for any help!

Note: The reason I have everything nested in the

user_8620333 · Answer

You can update your code like below:

img {
  /* this will make the image stretch and no overflow*/
  height:0;
  min-height:100%;
  /**/
}

h1 {
  background-color: white;
}

.banner {
  height: 90vh;
  background-color: red;
}


          
 
  
    Header
  
   
     Hello World

user_4314931 · Answer

Try this:

    
      Header
      
        
           Hello World

Working example: Codepen.

PS.: In my example I tried to follow your ms paint example.

user_3564359 · Answer

Use display:block to the img & this also helps in responsiveness you can check the fiddle if you want to explore.

OR

You can also look into vh for height and vw for width that will take care of all screen resolutions.

fiddle to playaround.

body,
html {
  height: 100%;
  width: 100%;
  position: absolute;
  margin: 0;
}

.content {
  height: 80%;
  background-color: red;
  display: flex;
  justify-content: space-around;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}




  Header



   Hello World

How to force an image to shrink to fit in flexbox?

3 Answers