0

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

Josh Rodgers
  • 507
  • 7
  • 27

2 Answers2

0

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:

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

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

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • I gave Brett the nod because he submitted his answer first and because it's slightly easier to add more images if needed, but that's really a stretch. I like both of these answers and could've flipped a coin for whose to choose. Thank you for helping!! – Josh Rodgers Jun 26 '23 at 00:25
  • Haha, I answered first, but all good. I would use Grid for this too. But you sometimes get slapped here for proposing a different solution, rather than helping to fix the original approach, so I stuck with that. :-) – ralph.m Jun 26 '23 at 00:44
  • 1
    Sorry about that, I looked and I swear it said he answered first, but thank you so much for your help! I do appreciate you tweaking my original answer. I liked my original code, but it definitely wasn't working as anticipated :-) – Josh Rodgers Jun 26 '23 at 00:48
0

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>
Brett Donald
  • 6,745
  • 4
  • 23
  • 51