如何將文字寬度與動態大小的圖像/標題的寬度相匹配？

Question

請參閱此代碼筆：https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

P粉008829791 · Answer

您可以簡單地將圖像的寬度設定為 100%。只需添加“寬度：100%；”進入您的 img 樣式標籤進行測試，如下所示：


  
  
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.

或將其放入一個類別中：

.img-full {
  display: block;
  width: 100%;
}


  
  
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.

「display: block」只是確保您的 img 始終位於它自己的區塊中，無論寬度如何。即您的文字不會出現在其旁邊，只會出現在其下方或上方。

P粉030479054 · Answer

使容器inline-block（或任何縮小到適合的配置，如table、inline-grid、inline -flex、float、absolute 等）然後強製文字寬度為0，從而定義容器的寬度通過圖像（文字不影響寬度），然後使用min-width

再次強制寬度為100%

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}


    
  
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.