请参阅以下代码en:https://codepen.io/allen-Houng/pen/xgmjmr？editors=1100#0
null
<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>null
我有一个父div和两个子div-一个图像和一个描述。 我正在根据视口高度调整图像大小，这意味着宽度将是动态的和响应性的。 在没有JavaScript的情况下，如何调整相应的同级div.description的大小以匹配图像的宽度？
使容器内联块，然后强制文本的宽度为0，这样容器的宽度由图像定义（文本不影响宽度），然后使用min-width再次强制宽度为100%
null
.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>
flexbox示例
null
*{margin:0}
.img
{
background: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fih0.redbubble.net%2Fimage.236642016.7494%2Fap%2C550x550%2C12x16%2C1%2Ctransparent%2Ct.png&f=1);
height: 100vh;
background-size: cover;
}<figure>
<div class="img"></div>
<figcaption>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut commodo nulla et nunc mattis mollis. Donec ornare ornare nibh, tempor elementum magna molestie vitae. Donec posuere felis vitae sapien suscipit, vel ultricies justo feugiat. Pellentesque semper
neque mi, eget venenatis turpis faucibus quis. Maecenas a odio odio. Etiam velit felis, tincidunt at feugiat sit amet, condimentum eget eros. Cras nec mauris non justo ullamcorper dignissim. Nullam vel nulla sit amet neque aliquet ullamcorper consectetur
laoreet sapien. Etiam convallis est libero, et finibus tellus tempus id. Ut imperdiet vestibulum nisi id venenatis. In eget justo vel purus hendrerit congue eget eu ante. Suspendisse non erat eget nisl facilisis volutpat. In consequat est nec lacus
fringilla, at varius tortor vehicula. Morbi dui arcu, efficitur nec sagittis vitae, vulputate eget leo.
</figcaption>
</figure>
您可以简单地将图像的宽度设置为100%。 只需添加“宽度:100%；” 到您的img样式标记中进行测试，如下所示:
null
<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>