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

Question

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

    <div>
      <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
      <div class="description">
        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.
      </div>
    </div>

我有一個父 div 和兩個子 div - 一個圖像和一個描述。我根據視窗高度調整圖像大小，這意味著寬度將是動態的且響應靈敏。在沒有 JavaScript 的情況下，如何調整對應同級 div .description 的大小以符合圖像的寬度？

換句話說，我該如何轉變：

進入這個：

Answer 1

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

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style="width: 100%;">
  <div class="description">
    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.
  </div>
</div>

或將其放入一個類別中：

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

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" class="img-full">
  <div class="description">
    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.
  </div>
</div>

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

Answer 2

使容器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%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    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.
  </div>
</div>