0

Please take a look at the code snippet below:

.parent {
  background-color: #a7dbff;
  width: fit-content;
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(https://i.stack.imgur.com/qV078.jpg);
  background-size: contain;
}
<div class="parent">
  <h3>Some title</h3>
  <div class="image"></div>
  <div>Some more content here</div>
</div>

<div class="parent">
  <h3>Some title</h3>
  <img class="image" src="https://i.stack.imgur.com/qV078.jpg">
  <div>Some more content here</div>
</div>

I'm trying to make the image the size of the largest element in the parent.

In the first example the image is set using background-image, this works fine. Using width: 100%, the element gets resized to the width of the parent.

But in the second example the image is an <img> element. In this case the image grows bigger than the parent, causing the parent to grow with it.

Some context: I'd like to use a <picture> element so that the ua automatically downloads the image in the correct format. The <picture> element seems to suffer from this same behaviour unfortunately. It seems like adding an <img> to the parent causes the fit-content value of the parent to grow.

What is causing this behaviour, and is there some way to fix this with css?

Note that this is similar to How to match width of text to width of dynamically sized image/title? but the solutions there don't apply here because I'm working with an <img> rather than a <div>

10
  • 1
    already tried object-fit: cover;?
    – tacoshy
    Sep 27, 2021 at 17:04
  • @tacoshy It feels like I've tried everything haha. Though not that one. Do you want me to put it on the image element? Because that doesn't seem to do anything. Sep 27, 2021 at 17:08
  • no on the parent element
    – tacoshy
    Sep 27, 2021 at 17:09
  • @tacoshy that doesn't seem to do much either :/ Sep 27, 2021 at 17:17
  • 1
    @TemaniAfif Hey sorry, you're right. I tried the third snippet on my project and this seems to work as well. I'm not really sure what went through my head when I requested a reopen. I could swear the duplicate wasn't using an <img> tag but I guess it is. Maybe I was just a little excited after finally finding a solution while trying to fix it for half a day. Feel free to close this again. Oct 4, 2021 at 12:44

2 Answers 2

1

I added two properties to .parent. I'm not sure how the white-space will work out on all kinds of sizes but it's ok for your example. There's a subtle difference in the snippet-result; I didn't look into that.

.parent {
  background-color: #a7dbff;
  width: fit-content;
  padding: 5px;
  margin: 5px;
  display: inline-block;
  
  max-inline-size: min-content;
  white-space: nowrap;
}

.image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(https://i.stack.imgur.com/qV078.jpg);
  background-size: contain;
}
<div class="parent">
  <h3>Some title</h3>
  <div class="image"></div>
  <div>Some more content here</div>
</div>

<div class="parent">
  <h3>Some title</h3>
  <img class="image" src="https://i.stack.imgur.com/qV078.jpg">
  <div>Some more content here</div>
</div>

2
  • Thanks! max-inline-size is exactly what I was looking for! Sep 27, 2021 at 20:43
  • 1
    I ended up doing it a little bit differently. I wrapped the <img> in a <div> with max-inline-size: fit-content;. Then there's no need for white-space: nowrap; Sep 27, 2021 at 20:55
0

Does this solve your problem?

.parent {
  background-color: #a7dbff;
  width:100px;
  padding: 5px;
  margin: 5px;
  display: inline-block;
}

.image {
  height:100%;
  width:100%;
  object-fit: cover;
}
<div class="parent">
  <h3>Some title</h3>
   <img class="image"  src="https://i.stack.imgur.com/qV078.jpg">
  <div>Some more content here</div>
</div>

You can also specify a height for the image, but then you need to create another parent div for the img and give the div a height property

7
  • Almost! Though I'd like for the content to be full width unless it doesn't fit on the page. Sep 27, 2021 at 20:48
  • Sorry, I didn't understand well what you meant, do you mean the parent width to change with the content of the text?
    – Remy Jouni
    Sep 28, 2021 at 9:18
  • Yeah basically, I want the parent to stay as big as possible, but I don't want it to grow with the image. I have a working setup now though. I'm using a wrapper for the image with max-inline-size: fit-content. I'm not really sure why this is working, but that's css development I guess. Sep 28, 2021 at 9:28
  • :D well we all learned CSS in similar manners, if you want the parent to be as big as possible then change the .parent width to be width:100%, if you want to make it grow with the text make it width:fit-content; . if you want to limit the height of the image when the parent grows you can add height:100px for the .image
    – Remy Jouni
    Sep 28, 2021 at 9:35
  • Ah sorry I meant to say I'd like it to be as big as possible, but not bigger than necessary. Basically I'd like to adjust the one on the right so that it looks similar to the one on the left, while still using an <img> tag. Sep 28, 2021 at 10:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.