請(qǐng)參閱此程式碼筆： 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>
我有一個(gè)父 div 和兩個(gè)子 div - 一個(gè)圖像和一個(gè)描述。我根據(jù)視窗高度調(diào)整圖像大小，這意味著寬度將是動(dòng)態(tài)的且響應(yīng)靈敏。在沒有 JavaScript 的情況下，如何調(diào)整對(duì)應(yīng)同級(jí) div .description 的大小以符合圖像的寬度？
換句話說(shuō)，我該如何轉(zhuǎn)變：
進(jìn)入這個(gè)：
2
0
0
您可以簡(jiǎn)單地將圖像的寬度設(shè)定為 100%。只需添加“寬度：100%；”進(jìn)入您的 img 樣式標(biāo)籤進(jìn)行測(cè)試，如下所示：
<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>
或?qū)⑵浞湃胍粋€(gè)類別中：
.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 始終位於它自己的區(qū)塊中，無(wú)論寬度如何。即您的文字不會(huì)出現(xiàn)在其旁邊，只會(huì)出現(xiàn)在其下方或上方。
使容器inline-block（或任何縮小到適合的配置，如table、inline-grid、inline -flex、float、absolute 等）然後強(qiáng)製文字寬度為0，從而定義容器的寬度通過(guò)圖像（文字不影響寬度），然後使用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>
