Shrink-to-fit div and paragraph, based on image?

Question

The code below is a simplified version of my website. On my site, the image width varies from page to page and the text is around 100 words. That means the paragraph stretch

Answer 1

I recommend adding in a little jquery.. to make your life so much easier:

imgw = $("img").width();
$("div").css("width", imgw);

Here is how it would look: http://jsfiddle.net/WM6hK/2/

This way you can add this simple line of code to any div and just replace $("div") with and ID $("#idofdiv"). Hope this helps!

Answer 2

And for doing anything table related I shall forever shame myself: http://jsfiddle.net/WM6hK/3/

div {
display: table;
border: 1px solid red;
width: 1%;
}

p {
border: 1px solid blue;
}​

Answer 3

Right now its not possible, using CSS

Using jQuery, its as easy as this

$("div").width($("div img").width());

Demo

Answer 4

No, it's not possible by only using CSS. You will need to set a width for the parent div and rescale your images.

Answer 5

You can use this:-

    div {
    width:20%;
    display:inline-table;
    }


p {
    border: 1px solid blue;
    }

It will totally work according to image size.....

see the demo:- http://jsfiddle.net/WM6hK/11/

Answer 6

    div {  
       width: fit-content;
       border: 1px solid red;
     }

        <div>
           <img src="https://picsum.photos/200" />
           <p>Lorem ipsum dolor sit amet.</p>
       </div>