'how to make responsive an <img> contained in a parent with display:flex?

Basically I have a layout where I have 3 elements inside a parent with display:flex.

<div class="flex">
 <div class="titleContainer">Title</div>
 <div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
 <div class="buttonContainer"><button>Button</button></div>
</div>

I should not have scroll in any direction. The idea is that the middle div:

<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>

takes the remaining space between .titleContainer and .buttonContainer, that's why it has the flex-grow:1 property.

The problem is that if I put an <img/> there is a problem of vertical and horizontal scroll,

enter image description here

this does not happen if I put any other element.

How can I make that the image does not cause scrolling problems and adapts to the available space? I need to know how to fix this problem using an <img/>.

Thank you very much

html,body{
  padding:0px;
  margin:0px;
  height:100%;
}

*{
 box-sizing: border-box;
}

img{
 margin:0px;
 padding:0px;
}

.flex{
 display:flex;
 border:1px solid red;
 flex-direction:column;
 height:100vh;
}

.titleContainer{
 border:1px solid blue;
}

.buttonContainer{
 border:1px solid green;
}

.imageContainer{
  flex-grow:1;
}
<div class="flex">
  <div class="titleContainer">Title</div>
  <div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
  <div class="buttonContainer"><button>Button</button></div>

</div>
css


Solution 1:[1]

You need to add max-width to the image so it adapts to the size of its container. Just add this to your css:

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

Solution 2:[2]

You can use media Queries to make the image smaller in size. in the css part add the following

@media all and (max-width: 1024px) and (min-width: 768px){ 
  img{
   width:200px; //or something like this. Change the size of the image. 
    }
}

There are more details on media queries on here - https://css-tricks.com/css-media-queries/

Solution 3:[3]

You always have to define the width and height for the photo sometimes you dont need to define height you just have to set width:100%; it will be responsive

html,body{ 
padding:0px; margin:0px; height:100%; 
} 
*{ 
box-sizing: border-box; 
} 
img{ 
margin:0px; padding:0px; width:100% !important; 
} 
.flex{ 
display:flex; border:1px solid red; flex-direction:column; height:100vh; 
} 
.titleContainer{ 
border:1px solid blue; 
} 
.buttonContainer{
border:1px solid green; 
} 
.imageContainer{ 
flex-grow:1; 
}
<div class="flex"> 
<div class="titleContainer">Title</div> 
<div class="imageContainer"><img src="https://cdn.colombia.com/images/v2/colombia-info/informacion/informacion-800.jpg" /></div>
<div class="buttonContainer"><button>Button</button></div> 
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bazzz
Solution 2 Lakshan Costa
Solution 3 Arta Gbn

Related Questions