如何将文字宽度与动态尺寸图像的宽度匹配？

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-一个图像和一个描述。我正在根据视口高度调整图像的大小，这意味着宽度将是动态的且响应迅速。如何在.description不使用JavaScript的情况下调整相应的同级div的大小以匹配图像的宽度？

换句话说，我该如何处理：

到这个：

Answer 1

使容器inline-block然后将文本的宽度强制为0，以便容器的宽度由图像定义，然后再次强制宽度100%使用min-width

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

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

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

<div class="parent">
    <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>

这是一个相关问题，可以更好地理解这种情况下使用百分比的技巧：https : //stackoverflow.com/a/54991250/8620333

另一个技巧是考虑图像的比例，您可以知道需要定义的宽度：

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

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

.description {
  max-width:calc(70vh * 1.5);
}

<div class="parent">
    <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>