如何使容器元素採用其子圖像的最大寬度？

包裹元素採取子影像的最大寬度

問題:

用戶希望希望將圖像作為包含元素的一部分顯示，並希望包含元素的寬度等於子圖像的寬度，即使包含元素中包含其他元素（例如文字）也一樣。

解決方法:

一個解決方法是使用CSS的display屬性將包裹元素設為table，並將其寬度設為1%。這將強制圖像突破該寬度並將其自己的大小設置為包裹器的寬度：

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

<div class="wrapper">
  <img src="image.jpg">
  <p>Your text here</p>
</div>

透過這種方式，包裹元素將採用子圖像的最大寬度，無論其他元素的內容如何。

以上是如何使容器元素採用其子圖像的最大寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！