使包装器采用子图像的最大宽度？

Question

我不确定我是否能够正确说出问题的意思，但是我想通过示例简单地了解要完成的工作。

但是没有给wqrapping div一个固定的宽度。因此，基本上，我希望包装器采用图像的宽度而不是过度扩展的文本。有什么办法吗？

还要注意，我不能使用绝对定位，因为从数据库传来的图像和文本每次都不同。

来自第一个链接的代码：

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  border: 1px solid red;
  display: inline-block;
}

来自第二个链接的代码：

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  width: 300px;
  border: 1px solid red;
}

Answer 1

有一个“哈克”的方式，用另一个显示属性您的包装，如果你强迫它是table和1%宽度IMG将打破这个宽度，并设置自己的大小，宽度包装：

.wrapper {

  border: 1px solid red;

  display: table;

  width: 1%;

}


<div class="wrapper">

  <img src="http://www.fillmurray.com/284/196">

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.

    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque

    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>