將文字寬度與動態大小的圖像/標題相匹配：逐步指南

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 樣式標籤進行測試，如下所示：

  
  

    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 始終位於它自己的區塊中，無論寬度如何。即您的文字不會出現在其旁邊，只會出現在其下方或上方。

Answer 2

將容器設定為inline-block（或任何收縮配置，如table、inline-grid、inline-flex 、float、absolute 等），然後強製文字寬度為phpcnc phpcn0 所以容器的寬度是由圖像定義（文字不影響寬度），然後使用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.