How do I prevent an `<img>` from making a parent with `width: fit-content` bigger [duplicate]-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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