How do I prevent an `` from making a parent with `width: fit-content` bigger

Question

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>

@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. — Jespertheend, Sep 27 '21 at 17:08
@m4n0 can you explain to you mean why you reopened this perfect duplicate? Also the edit of the OP doesn't make sense because that duplicate deals with image too. — Temani Afif, Oct 04 '21 at 08:37
^ for the reference, the 3rd snippet of the duplicate is exactly the same as the one here — Temani Afif, Oct 04 '21 at 08:46
@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 `` 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. — Jespertheend, Oct 04 '21 at 12:44
Also, please add the new solution there. `max-inline-size` if it is not there. I received this request in the long close votes request. If the author has mentioned that if he is not able to solve with some reason, I tend to reopen it. The ratio of authors clarifying their request is around 1 out of 20. — m4n0, Oct 04 '21 at 12:58
@m4n0 no need to add such solution because it's not a *new* one, it's a hacky solution that has low browser support. The solution I provided has better browser support and is better than the max-inline-size one because it consider a lot of cases and is more generic. Try different cases with the below solution and it will fail — Temani Afif, Oct 04 '21 at 14:04

score 1 · Accepted Answer · answered Sep 27 '21 at 17:31

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>

Thanks! `max-inline-size` is exactly what I was looking for! — Jespertheend, Sep 27 '21 at 20:43
I ended up doing it a little bit differently. I wrapped the `` in a `
` with `max-inline-size: fit-content;`. Then there's no need for `white-space: nowrap;` — Jespertheend, Sep 27 '21 at 20:55

score 0 · Answer 2 · answered Sep 27 '21 at 17:40

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

answered Sep 27 '21 at 17:40

Remy Jouni

43
6

Almost! Though I'd like for the content to be full width unless it doesn't fit on the page. – Jespertheend Sep 27 '21 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 '21 at 09: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. – Jespertheend Sep 28 '21 at 09: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 '21 at 09: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 `` tag. – Jespertheend Sep 28 '21 at 10:13
The width of the one on the right is related to the text content. so if you want to make the right one to match the one on the left, add `width: fit-content` to `.parent` class. – Remy Jouni Sep 28 '21 at 17:43
I already tried that. I have `width: fit-content` in the OP. To be clear, I've already got a fix. But I'm all open for different solutions :) – Jespertheend Sep 28 '21 at 18:26

How do I prevent an `` from making a parent with `width: fit-content` bigger

2 Answers2