CSS object-fit: contain; is keeping original image width in layout

Question

I\'m trying to make my images responsive inside some flexbox containers using object-fit: contain, and while the images do resize, the layout seems to be keepin

Answer 1

You can wrap img tag with a div with width: 100% and set image height to 100% and do that without object-fit:

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

.page {
  height: 100%;
  display: flex;
}

.main-container {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.half-containers {
  flex: 0 1 50%;
  overflow: auto;
  box-sizing: border-box;
  border: 0.5px solid red;
  display: flex;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}


.img-container {
  width: 100%;
}

img {
  height: 100%;
}

  

    

      This is a header
    
    

      

        
      
    
    

      

        
       
    
    

      This is a footer