Hello, I am trying to make the container height adjust automatically based on the responsive image it contains. The container's display is set to flex and the image is positioned between two divs with the class "text-block". These divs have a width of 37% and a min-width of 37%. The image's width is set to a max of 100% so it adjusts its size responsively as the screen width changes.
My goal is to have the container's height change dynamically based on the image height. The container's height should always match the image height, and I also want to ensure that neither the container nor the image exceeds 100vh in height when they expand.
PHOTO:
containers height adjust to img height
height of container and img don't exceed height of 100vh
LINK to problem: Here is my code on codepen: https://codepen.io/milkiway420/pen/xxrVgMZ
body {
height:100%;
}
.container{
display: flex;
width: 100%;
}
.text-block {
width: 37.645448%;
min-width:37.645448%;
background: #e3e3e3;
}
img {
max-width:100%;
}