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

by

What you have is logical, you simply need to understand how object-fit works. Let’s start with an easier example:

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:100%;
 height:100%;
 object-fit:contain;
}
<div class="box">
  <img src="https://picsum.photos/300/200?image=1069">
</div>

As you can see I have used a 300x200 image that I stretch inside the 300x300 box thus I break its ratio and if you check the width/height of the image you will see that it’s dimension is still 300x300 (the dimenstion before applying object-fit).

From the specification:

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Basically, we visually change the content of the image so it fit the space established by the image. object-fit doesn’t change the size of the image but uses that size as a reference to change its content inside.

Let’s take the same example and use 50% instead:

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
 object-fit:contain;
}
<div class="box">
  <img src="https://picsum.photos/300/200?image=1069">
</div>

Now the image has a dimension of 150x150 and inside this we change the content to have the contain effect.

Same logic will happen with all the values

.box {
  width:300px;
  height:300px;
  border:1px solid;
}
img {
 width:50%;
 height:50%;
}
<div class="box">
  <img src="https://picsum.photos/300/200?image=1069" style="object-fit:contain;">
</div>
<div class="box">
  <img src="https://picsum.photos/300/200?image=1069" style="object-fit:cover;">
</div>

In you example you are having the same thing. without object-fit the image is like below

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 {
  /*object-fit: contain;*/
}
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

Adding object-fit won’t change its size but only what we see:

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 {
  object-fit: contain;
}
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

Now, the other issue is that your image has a width of 1024px and a flex items will not stretch past its content size due to the min-width constraint so what you need to add in order to obtain the needed effect is min-width:0. Doing so you will no more have overflow issue then your image will be contained inside the area defined by the flexbox layout.

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

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

.main-container {
  flex: 1 1 0;
  display: flex;
  min-width: 0; /*added*/
  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 {
  object-fit: contain;
  min-width: 0; /*added*/
}
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="half-containers">
      <img src="https://i.imgur.com/tqQvuFr.jpg" />
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

You can also have the same output considering background-image and background-size:contain where you no more have to bother with the min-width contraint since there is no more content

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;
  background:url(https://i.imgur.com/tqQvuFr.jpg) center/contain no-repeat;
}

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

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}
<div class="page">
  <div class="main-container">
    <div class="page-header">
      This is a header
    </div>
    <div class="half-containers">
    </div>
    <div class="half-containers">
    </div>
    <div class="page-footer">
      This is a footer
    </div>
  </div>
</div>

More Related Contents:

  1. Flexbox: center horizontally and vertically
  2. CSS-only masonry layout
  3. Make container shrink-to-fit child elements as they wrap
  4. When flexbox items wrap in column mode, container does not grow its width
  5. One flex/grid item sets the size limit for siblings
  6. Why are flex items not wrapping?
  7. Make grid container fill columns not rows
  8. Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
  9. Align an element to bottom with flexbox
  10. Make background color extend into overflow area
  11. Force flex item to span full row width
  12. Why can’t be flex containers?
  13. Prevent flex items from rendering side to side
  14. Flexbox and Internet Explorer 11 (display:flex in ?)
  15. What’s the difference between flex-start and baseline?
  16. ‘position: sticky’ not working when ‘height’ is defined
  17. Flexbox column-reverse in Firefox, Edge and IE
  18. Text not centered with justify-content: center
  19. Flexbox affects overflow-wrap behavior
  20. How to stretch flex child to fill height of the container?
  21. How to align flexbox columns left and right?
  22. Flexbox resize and scrollable overflow [duplicate]
  23. Prevent a child element from overflowing its parent in flexbox [duplicate]
  24. Why isn’t position:sticky with left:0 working inside a scrollable container?
  25. Chrome does not expand flex parent according to children’s content [duplicate]
  26. How to center horizontally and vertically?
  27. Flexbox on IE11: image stretched for no reason?
  28. extra space when centering elements using flexbox
  29. Height is not correct in flexbox items in Chrome [duplicate]
  30. Sizing flex items on the last row

Leave a Comment