基于图像缩小以适应 div 和段落？

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 stretches the DIV to be wider than the image. Using only CSS, is it possible to shrink the DIV and the paragraph to the width of the image?

JSFiddle here

Example of what I'm trying to describe here . Top is what I'm getting, bottom is what I want.

HTML

<div>
    <img src="image.jpg" />
    <p>Lorem ipsum dolor sit amet.</p>
</div>

CSS

div {
   display: inline-block;
   }

Answer 1

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 2

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 3

You can add a CSS style to the parent div.

set the width of the parent div to width: fit-content.

this will make your parent div to shrink or expand based on the size of the child elements nested within it.

 div { width: fit-content; border: 3px solid red; text-align: center }

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

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

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 6

Right now its not possible, using CSS

Using jQuery, its as easy as this

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

Demo