Flexbox Object-fit Image

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,<br />
Josh

I assume it's not working because your boxes don't have an explicit size. (They're just being pushed open by the before pseudo-element, but the image then just pushes them further open.) I'm not sure if you're using :before just to give the boxes visual dimensions, but there may be better approaches with Flexbox, such as this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
   margin: 0;
}

#head .row {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}

#head .row div {
  background: #ddd;
  flex: 1 0 calc(20% - 4px);
  aspect-ratio: 1/1;
}

#head img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  display: block;
}

<!-- language: lang-html -->

<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>
    <div><!-- --></div>
    <div><!-- --></div>
    <div><!-- --></div>
    <div><!-- --></div>
  </div>
</div>

<!-- end snippet -->

You can get those nice square boxes with aspect-ratio, but there are other ways to do it, of course.

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->