See this code pen: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0
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.
I have a parent div and two child divs - an image and a description. I resize the image based on the viewport height, which means the width will be dynamic and responsive. How can I resize the corresponding sibling div.descriptionto match the width of the image without JavaScript?
In other words, how do I transform:
Enter this:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can simply set the width of the image to 100%. Just add "width:100%;" into your img style tag to test like this:
Or put it into a class:
.img-full { display: block; width: 100%; }"display: block" simply ensures that your img is always in it's own block, regardless of width. That is, your text won't appear next to it, only below or above it.
Make the container
Force the width toinline-block(or any configuration that shrinks to fit, such astable,inline-grid,inline-flex,float,absolute, etc.) then force the text width to0, thus defining the width of the container via the image (the text does not affect the width), then usemin-width100%again.parent { background: pink; display:inline-block; } img { display: block; max-height: 70vh; } .description { width:0; min-width:100%; }