根据图像收缩到适合div和段落？

Question

以下代码是我网站的简化版。在我的网站上，图像宽度因页面而异，文本大约为100个单词。这意味着段落将DIV拉伸到比图像更宽。仅使用CSS，是否可以将DIV和段落缩小到图像的宽度？

JSFiddle here

Example of what I'm trying to describe here。 Top是我得到的，底部是我想要的。

HTML

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

CSS

div {
   display: inline-block;
   }

Answer 1

为了做任何与表有关的事情，我将永远羞辱自己：http://jsfiddle.net/WM6hK/3/

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

p {
border: 1px solid blue;
}​

Answer 2

您可以使用此功能： -

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


p {
    border: 1px solid blue;
    }

根据图像尺寸完全可以工作.....

参见演示： - http://jsfiddle.net/WM6hK/11/

Answer 3

不，仅使用CSS是不可能的。您需要为父div设置宽度并重新缩放图像。

Answer 4

我建议添加一点jquery ..让你的生活更轻松：

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

以下是它的外观：http://jsfiddle.net/WM6hK/2/

通过这种方式，您可以将这一简单的代码行添加到任何div中，并将$（“div”）替换为ID $（“＃idofdiv”）。希望这有帮助！

Answer 5

现在使用CSS

是不可能的

使用jQuery，它就像这个一样简单

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

Demo

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>