Question 194057 in CSS Question posted in
Some basic documentation can be found here.

Css – 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,
Josh

Tags:

2

Answers


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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search