将文本宽度与动态大小的图像/标题相匹配：分步指南

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.