Flexbox Object-fit Image

Question

I created a very simple flexbox layout, I have two rows and 5 columns. My idea is to put pictures in the boxes, but when I add an image it distorts the grid.

My code looks like:

<div id="head">
    <div class="row">
        <div><img src="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg" /></div>
        <div><!-- --></div>
        <div><!-- --></div>
        <div><!-- --></div>
        <div><!-- --></div>
    </div>
    <div class="row">
        <div><!-- --></div>
        <div><!-- --></div>
        <div><!-- --></div>
        <div><!-- --></div>
        <div><!-- --></div>
    </div>
</div>

My css looks like:

body {
    margin: 0;
}

#head .row {
    display: flex;
}

#head .row div {
    background: #ddd;
    flex: 1 0 auto;
    height: auto;
    margin: 1px;
}

#head .row div::before {
    content: '';
    float: left;
    padding-top: 100%;
}

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

When I add an image into the mix with object-fit: contain or cover, nothing seems to happen. My expectation is that it would fit inside my box.

Does anyone know what I could adjust to fix this?

Fiddle without the image: https://jsfiddle.net/joshrodgers/c7j48zw1/1/

Fiddle with the image: https://jsfiddle.net/joshrodgers/ro16atsg/

I read that adding the 100% to the width and height would help my object-fit because then I'm making the image the same size as the container...but that doesn't seem to change the size of the image at all.

Any help is appreciated :-)

Thanks,
Josh

Answer 1

If you want the layout to be a grid, use a CSS grid.

body {
  margin: 0;
}

.d1 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin: 2px;
}

.d1>div {
  background: #ddd;
  aspect-ratio: 1/1;
}

.d1 img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

<div class="d1">
  <div><img src="https://cdn.britannica.com/98/214598-050-9879F2FA/giant-sequoia-tree-Sequoia-National-Park-California.jpg" /></div>
  <div></div>
  <div><img src="https://picsum.photos/id/131/500"></div>
  <div></div>
  <div><img src="https://picsum.photos/id/132/500"></div>
  <div></div>
  <div><img src="https://picsum.photos/id/133/500"></div>
  <div></div>
  <div><img src="https://picsum.photos/id/134/500"></div>
  <div></div>
</div>