How to Match Width of Text to Width of Dynamically Sized Image/Title

How to match width of text to width of dynamically sized image/title?

Make the container inline-block (or any shrink-to-fit configuration like table,inline-grid,inline-flex, float,absolute etc) then force the width of text to be 0 so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100% using min-width

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

How to base the width of the rest of the elements on the width of the title?

I hope this should resolve your query :

.projects {  width: 30vw;  left: 10vw;  right: 10vw;  margin: 50px auto 0 auto;  text-align: center;}
.pTitle {  width: 100%;  display: flex;  justify-content: center;}
.p1Info {  width: 100%;}

<div class="projects">  <h2>My Projects:</h2>  <div class="pContent">    <h3 id="p1" class="pTitle">Project Titdsdasdsads asdsa asd asd asdsa dasdsad sdsad sadsaa sadsa asdsadsa asdsadasdsale</h3>    <div id="p1Info" class="pInfo">      <p class="desc">This is a project description Lorem Ipsum Dolorhis is a project description Loremhis is a project description Lorem</p>      <p class="demo">View a demo of the project.</p>    </div>  </div>  <br>  <div class="pContent">    <h3 id="p2" class="pTitle">Another Project Title</h3>    <div id="p2Info" class="pInfo">      <p class="desc">This is a project description Lorem Ipsum Dolor</p>      <p class="demo">View a demo of the project.</p>    </div>  </div></div>

Make element same width as dynamically sized image?

Updated

Based on the exact requirements you set for this question, it can't be solved with CSS only.

This is the best I was able to come up with.

Fiddle demo 1 (fixed height for text, image fully visible)

Fiddle demo 2 (semitransparent scaleable text on top of image with animation)

The trick I mainly used is having a hidden img to make up for the space and then a background-image to scale to maximum width/height with kept ratio.

I added the inline style background-image for convenience, so content can be handled within the html.

To make it perfect, a script is needed, which calculate the caption's content and adjust the image's/caption's reduction/height.

Snippet demo 1

html, body {  margin: 0;  white-space: nowrap;  overflow-y: hidden;}.container {  display: inline-block;  white-space: normal;  width: 100%;}.wrap {  margin: 0 auto;  display: table;}.image {  display: table-cell;  background-position: center bottom;  background-repeat: no-repeat;  background-size: contain; }.image img {  visibility: hidden;  max-width: 100vw;  min-width: 100%;  height: calc(100vh - 80px);}.caption {  display: table-caption;  caption-side: bottom;  height: 40px;  line-height: 22px;  padding: 8px;  background-color: #ddd;  overflow: hidden;}.right {  text-align: right; }

<div class="container">  <div class="wrap">    <div class="image" style="background-image: url('http://placekitten.com/450/300')">      <img src="http://placekitten.com/450/300">    </div>    <div class="caption right">      moar kitty!      moar kitty!      moar kitty!    </div>  </div></div>
<div class="container">  <div class="wrap">    <div class="image" style="background-image: url('http://placekitten.com/500/440')">      <img src="http://placekitten.com/500/440">    </div>    <div class="caption">      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1      have a kitty!!1    </div>  </div></div>
<div class="container">  <div class="wrap">    <div class="image" style="background-image: url('http://placekitten.com/300/440')">      <img src="http://placekitten.com/300/440">    </div>    <div class="caption">      too many kitty..      too many kitty..      too many kitty..    </div>  </div></div>

Center image and text at large width, allow both to shrink at small width?

Here is the simplified demo, which has been tested and works great on IE8+, Chrome and Firefox.

JsFiddle Demo

body {    margin: 0; /* reset default margin */}div {    display: table; /* shrink to fit content */    margin: 0 auto; /* center the element */    text-align: center; /* center the content inside */}img {    width: 100%; /* maintain image width to be responsive */    height: auto; /* maintain image aspect ratio */}p {    display: table-caption; /* the magic part, shrink to fit */    caption-side: bottom; /* place it to the bottom */}

<div>    <img src="http://i.imgur.com/iHaA1Yt.jpg" />    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p></div>

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

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>

How to Match Width of Text to Width of Dynamically Sized Image/Title