I have a container with a height of 100vh. Inside it, there is an image and some text. The text's height may vary based on the screen size and content length. I want the text to occupy its required space while the image fills up the remaining available space.
This code works as intended, but I would like to remove the fixed 83vh for the image. Can the image automatically adjust to take up the rest of the space? Is this achievable?
Thank you in advance!
(Note: I included the Javascript tag because I'm unsure if a Javascript solution is needed.)
.container {
height: 100vh;
max-height: 100vh;
background-color: #CCCCCC;
}
img {
max-height: 100%;
width: 100%;
object-fit: cover;
object-position: center -180px;
/* dynamically adjust height */
height: 83vh
}
.text-wrapper {
padding-left: 15px;
}<div class="container">
<img src="https://img.example.com/img/image.jpg">
<div class="text-wrapper">
<h1>Insert Text Here</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <br>invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>