I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this project.
Current result when the description is small:https://i.stack.imgur.com/tw9jK.jpg Undesired result when the description is large:https://i.stack.imgur.com/AEuAZ.png Desired result when the description is large:https://i.stack.imgur.com/ASMWM.png
This is my code snippet:
<div className={classes["main-post-container"]}>
<img className={classes["main-image"]} src={test} alt="test" />
<p className={classes["main-description"]}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus illo
enim magnam neque fugit rem praesentium voluptate quod architecto aut
non, id fugiat modi tempora hic sed amet, eligendi delectus. Lorem ipsum
dolor sit, amet consectetur adipisicing elit. Temporibus obcaecati
dolore mollitia animi praesentium laudantium sit cumque exercitationem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos minima
pariatur quae id et officiis repellat doloribus, beatae ducimus quaerat
repellendus nesciunt aliquid dolorem recusandae vero officia! Pariatur,
voluptatem fugiat. .
</p>
</div>
CSS:
.main-post-container {
width: 70%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
padding: 3rem;
}
.main-image {
max-height: 450px;
max-width: 800px;
object-fit: fill;
flex-grow: 1;
}
.main-description {
font-weight: 900;
font-size: 1rem;
flex-grow: 3;
}