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

Posted 2023-03-06

【中文标题】缩小以适应 div 和段落，基于图像？

【英文标题】：Shrink-to-fit div and paragraph, based on image?

【发布时间】：2012-04-14 15:07:18

【问题描述】：

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

JSFiddle here

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 的情况下完成。

在这里找到了类似的回复：***.com/questions/2920968/…

@hjpotter92，不一样

【参考方案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());

Demo

【参考方案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);

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

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

【讨论】：

我可能最终会使用这条路线，因为它更干净。但表格选项实际上回答了这个问题。

【参考方案6】：

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