請參閱此代碼筆： 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 - 一個圖像和一個描述。我根據(jù)視口高度調(diào)整圖像大小，這意味著寬度將是動態(tài)的且響應(yīng)靈敏。在沒有 JavaScript 的情況下，如何調(diào)整相應(yīng)同級 div .description 的大小以匹配圖像的寬度？
換句話說，我該如何轉(zhuǎn)變：
進(jìn)入這個：
2
0
0
您可以簡單地將圖像的寬度設(shè)置為 100%。只需添加“寬度：100%；”進(jìn)入您的 img 樣式標(biāo)簽進(jìn)行測試，如下所示：
<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 始終位于它自己的塊中，無論寬度如何。即您的文字不會出現(xiàn)在其旁邊，只會出現(xiàn)在其下方或上方。
使容器inline-block（或任何收縮到適合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后強(qiáng)制文本寬度為 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>
