如何使包裝元素自動調整到其子影像的最大寬度？

讓包裝器採用子影像的最大寬度？

簡介：

在網站設計中，可能需要建立一個自動調整其子內容寬度的包裝元素。當子內容是圖像時，這特別有用，因為它的寬度可能會根據其來源而變化。

期望的結果：

您想要建立一個包裝元素這將採用其子影像的最大寬度，而無需明確設定固定寬度。這可以確保包裝器不會比必要的寬，同時仍允許影像正確顯示。

解決方案：

雖然不可能使用以下方法實現此行為純CSS，但有一個可以使用的「hack」。透過強制包裝器元素為表格並將其寬度設為1%，您可以欺騙圖像打破包裝器的寬度並將其自身的寬度設置為包裝器的寬度

代碼：

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

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum...</p>
</div>

說明：

當顯示設定為表格時，元素轉換為表格，其子元素變成表格儲存格。不過，包裝紙也給了1%的寬度，這個寬度非常小。因此，圖像會忽略包裝器的寬度並設定自己的寬度，該寬度將成為包裝器的實際寬度。

以上是如何使包裝元素自動調整到其子影像的最大寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！