Exploring this particular question along with its chosen solution.
I have taken the code from the selected answer and made some adjustments in the code snippet below, replacing #div1 with .header and #div2 with .contents, then placing both divs within a container.
My requirement is simple: I want to include an image in the .contents div that occupies the same height as the .contents div itself (thus utilizing the remaining height in the container). The width of this image should be automatic, maintaining its aspect ratio.
The main issue at hand: how can I ensure that all divs have the exact same width as that of the computed image?
The following code accomplishes everything mentioned above, except for the fact that the divs do not match the image's width.
.container {
position: absolute;
height: 60%; /* mandatory condition; height must be a percentage */
width: 40%; /* this line needs to be removed, as the width should match the image */
border: 5px solid black;
}
.header {
width: 100%; /* the width should correspond to the image's width */
height: 100px;
background: red;
}
.contents {
width: 100%; /* the width should align with the image's width */
position: absolute;
top: 100px;
bottom: 0;
background: blue;
}
.contents img {
height: 100%;
width: auto; /* the width will be calculated based on the height while maintaining the aspect ratio */
} <div class="container">
<div class="header"></div>
<div class="contents">
<img src="http://via.placeholder.com/200x200" width="200" height="200" alt="" title="" />
</div>
</div>If feasible, I would prefer a resolution devoid of javascript.