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

【问题标题】：Shrink-to-fit div and paragraph, based on image?缩小以适应 div 和段落，基于图像？
【发布时间】：2012-04-14 15:07:18
【问题描述】：

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

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

HTML

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

CSS

div {
   display: inline-block;
   }

【问题讨论】：

我在widest object on the 附近失去了你。你能把你得到的东西和你需要的东西截图吗？
我还没有编程/想好，但是如果每个页面都有不同的图像宽度，为什么不有一个javascript（我对jQuery/AJAX不太熟悉）onload函数，它设置你的 div 宽度到你的图像的宽度？
@hjpotter92 这当然是一个选择。我只是想知道它是否可以在没有 Javascript 的情况下完成。
在这里找到了类似的回复：stackoverflow.com/questions/2920968/…
@hjpotter92，不一样

标签： html css

【解决方案1】：

您可以为父 div 添加 CSS 样式。

设置父 div 的宽度为 width: fit-content。

这将使您的父 div 根据嵌套在其中的子元素的大小来缩小或扩大。

    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>

【讨论】：

【解决方案2】：

你可以使用这个：-

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


p {
    border: 1px solid blue;
    }

它将完全根据图像大小工作.....

查看演示：- http://jsfiddle.net/WM6hK/11/

【讨论】：

【解决方案3】：

现在不可能，使用 CSS

使用jQuery，就这么简单

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

【讨论】：

【解决方案4】：

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

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

p {
border: 1px solid blue;
}

【讨论】：

【解决方案5】：

我建议添加一个小 jquery.. 让您的生活更轻松：

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

这样，您可以将这行简单的代码添加到任何 div 中，只需将 $("div") 替换为 ID $("#idofdiv")。希望这会有所帮助！

【讨论】：

【解决方案6】：

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

【讨论】：