Unsure why CSS object-fit property is not working

Question

I'm trying to cover a flex-box container with an image but the CSS property object-fit doesn't seem to be working and is not fitting my image which is 1536 x 1536 which is much bigger than what the dimensions are for the container. This is what it looks like:

And this is what the image looks like:

How can I fit this image into that flex box container?

.flex-container {
  display: flex;
  flex-wrap: wrap;
  border-radius: 16px;
  background-color: linear-gradient(90deg, rgba(244, 247, 252, 0.5) 0%, rgba(244, 247, 252, 0.5) 100%);
  justify-content: center;
}

.flex-container>div {
  background-color: white;
  width: 20vh;
  margin: 15px;
  text-align: center;
  line-height: 20vh;
  font-size: 30px;
  object-fit: contain;
}

.sdg1 {
  background: url("https://via.placeholder.com/1536.jpg");
}

<div className="flex-container">
  <div className="sdg1"></div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
  <div>SDG</div>
</div>

onbject fit is for an img element not for a background image. the background image does not influence the element itself. As the name indicates it is just background. — tacoshy, Jul 22 '22 at 14:09
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size is what you're looking for in this case — AStombaugh, Jul 22 '22 at 14:10
It already does by default. At least if you use `class` instead of `className`. Do you use react? — tacoshy, Jul 22 '22 at 14:11
Yes it's react, I did `background-size: contain;` and it worked! — Soccerball123, Jul 22 '22 at 14:12
background-size: contain/cover; https://stackoverflow.com/a/8200264/17447 — naveen, Jul 22 '22 at 14:13

score 2 · Accepted Answer · edited Jul 25 '22 at 19:33

object-fit should be used on img elements to determine how they will be displayed inside of their own "container".

For this to work, you must replace your <div> element with an <img> element. Here is an example of how object-fit works:

.contained {
  border: 1px solid black;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

<img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/labrador-retriever-1210559__480.jpg" class="contained">

Codepen

Unsure why CSS object-fit property is not working

1 Answers1