How do I make an image the size of the parent without making the parent bigger-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?

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